Webtech Walker

iOSのSafariで特定のfont-sizeのときの謎の隙間

iOSのSafariでなぜか特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしいのか、折り返し位置がずれるという件。

DEMO

これをiPhoneで見るとこんな感じになる。

iPhoneでDEMOを見たときのキャプチャ1 iPhoneでDEMOを見たときのキャプチャ2

こんな感じ。11px、10px、9pxのときに右側に隙間が空いてるがわかると思います。これは特にpaddingとかとってるわけではなくて、このfont-sizeのときだけなぜか隙間が空くんです。8pxは大丈夫なので11px以下というわけではないみたい。さらにマルチバイトでなければ隙間はできない。謎。

ちなみにiOS4.3でも直ってなかった。Androidは大丈夫。

解決方法知ってる人がいたら教えてほしい。

追記:letter-spacing: -0.001em; で直るっぽい
このエントリーをはてなブックマークに追加