Chrome(webkit)の最小フォントサイズとinline要素間のスペースについて

Google Chromeは設定項目は無いが最小フォントサイズの設定があり、
デフォルトではフォントサイズが10px以下にはならないようになっている。



変更方法は検索すればすぐ分かるので割愛。


どうしてwebkitの最小フォントサイズを問題にしているかというと、
私の書いている「ニコニコ動画(9) 検索結果、新着動画を3列表示に」
などのユーザースタイルシートはinline-blockを使って
レイアウトの段組を変えているからだ。


inline-blockやinline要素にするとそれらの要素間にスペースや改行があると
上の画像のように2つの要素間にスペースが空いてしまう。


この問題の解決方法としてはFirefoxやOperaなどでは最小フォントサイズが
指定されていてもfont-sizeが0の場合にはそれを無視するという
仕様であるのを利用して、inline要素の親要素のfont-sizeを0にし、
inline要素のfont-sizeを元の設定に戻すことで、
inline要素間のスペースをなくすことができる。


一方SafariやGoogle Chromeなどのwebkitを使ったブラウザではfont-sizeを
0にしても最小フォントサイズ以下のサイズにはならないため、
inline要素間のスペースを隠すことができない。


しかもこのスペースの大きさはフォントの種類によって違うので例えば
inline-block要素のmargin-rightを「-○em」と指定しても、
正確には解決することもできない。


そのためこの問題を厳密に解決しようとするならばユーザースクリプトで
要素間のスペースや改行をすべて削除するしかない。


しかし私がユーザースタイルシートで使うような場合は形として段組が
それなりに変えて見えればいいのでinline-block要素のmargin-rightを
「-0.333em」に指定している。これは要素間のスペースの大きさが大体
font-sizeの3分の1であることと、「em」で相対指定すればFirefoxやOperaは
「font-size: 0」が有効であるためそれらのブラウザには影響を与えないためだ。