ホーム > タグ > Simple Tags

Simple Tags

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

2008 年 11 月 7 日 11:15 AM
CSS
CSS | float | IE | line-height | Windows | バグ

ときどき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%なので、上にずれて表示されてしまう（＝文字の上側が欠ける）。

あくまで推測ですけど。