btmup Blog

Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

CSS

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

投稿日:

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

あくまで推測ですけど。







-CSS
-, , , , ,

執筆者:


  1. […] floatとline-heightを一緒に指定すると、文字が欠ける。 | btmup Blog […]

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

col/colgroup 要素で有効なスタイルと無効なスタイル。

「ある列だけを改行なしにしたい」というときが結構あります。 確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。 ソースの見栄え的にも …

no image

IE6 で文章の最後の2文字(くらい)が変なところに表示されてしまう問題の原因と解決法。

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。 IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なと …

no image

CSS Nite in OSAKA, Vol.17 に参加してきました。

7/18(土)に開催された「CSS Nite in OSAKA, Vol.17 powered by KAGOYA Internet Routing」に参加してきました。 参加というか、まぁ勉強ですね …

no image

CSS のプロパティの書き順をちゃんと決めることにした。

「今さらかよ」という声が聞こえてきそうですが。 前々から「いつかやろう」「これが終わったらしよう」と思いつつ早幾月。 ようやく踏ん切りが付きました。 ので、自分はこういう順番で書きますよー、という宣言 …

no image

上付き(下付き)の設定は(X)HTMLタグかCSSか。

「m3」や「CO2」など、上付き・下付き文字を設定する場合にいつも悩みます。 上付き(下付き)にすることに意味があるような気がするので、(X)HTMLで問題ないとは思いつつ。 でもやっぱり見た目をコン …