Home > CSS > floatとline-heightを一緒に指定すると、文字が欠ける。

floatとline-heightを一緒に指定すると、文字が欠ける。

[読了時間の目安:約 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%なので、上にずれて表示されてしまう(=文字の上側が欠ける)。

あくまで推測ですけど。

Comments:0

Comment Form
Remember personal info

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 [...]

Home > CSS > floatとline-heightを一緒に指定すると、文字が欠ける。

リンク
フィード
メタ情報

このページのトップへ