- 2008 年 11 月 7 日 11:15 AM
- CSS
［読了時間の目安：約 2 分］
ときどきWindowsのIEで、文字が数ピクセル欠けて表示されることがあります。
その原因の一つが、floatとline-heightを一緒に指定していること。
とりあえず同じ要素に指定しなければ発生しないので、line-heightを親要素に指定するなどの方法で回避できます。
%やemなどの単位を付けずに、line-height:1.2;というふうに数値のみで指定すれば解決することもあるそうですが、別々に指定する方が確実だと思います。
いちいち検証する手間も省けますし。
原因はおそらく、floatした要素を表示する範囲は前に（別の箇所で）指定されたline-heightのままで、中身の文字だけに新しく指定したline-heightが効いてしまってるんだと思われます。
例）全体にline-height:150%を指定して、floatした要素にline-height:100%を指定した場合、表示範囲は150%で文字だけが100%なので、上にずれて表示されてしまう（＝文字の上側が欠ける）。
あくまで推測ですけど。
- 次の記事: XOOPS Cube Legacyを別サーバーに移動。
- 前の記事: 使用中のFirefoxアドオン一覧。
関連している（かもしれない）記事
Comments:0
Trackbacks:1
- Trackback URL for this entry
- http://blog.btmup.com/css/character-chipped.html/trackback
- Listed below are links to weblogs that reference
- floatとline-heightを一緒に指定すると、文字が欠ける。 from btmup Blog
- pingback from LAGRANGE BLOG ~web-design~ » IE6.7で文字が欠ける 09-02-13 (金) 4:43
-
[...] floatとline-heightを一緒に指定すると、文字が欠ける。 ｜ btmup Blog [...]
