ホーム > タグ > float

float

各種ブラウザの印刷のバグが治る(かも知れない)CSS の設定。

float を使って段組みのレイアウトにしているとき、印刷がおかしくなることが多々あります。
というか、おかしくならないことの方が多い。
というか、float を使ってなくてもおかしくなることの方が多い。
(特に、IE6、IE7、IE8、Firefox あたり)

そんなとき、こんな印刷用 CSS を作っておいたら解決するかもよ! 的な内容です。
この記事の続きを読む

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

ひょっとしたら定番ネタかも知れないのですが、ググってみても情報が見当たらなかったのでとりあえずメモ。

IE6 で float を使ったレイアウトをしているとき、文章の末尾(最後の2文字くらい)が変なところに表示されるということがあります。
どう変かというと、末尾の文字をそのままコピーしてはみ出たような、そんな感じです。
もちろんソースにそんなものは含まれていません。
JavaScript や PHP なんかを使っている訳ではなく、純粋に HTML と 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%なので、上にずれて表示されてしまう(=文字の上側が欠ける)。

あくまで推測ですけど。

1 / 11

Home > Tags > float

リンク
フィード
メタ情報

このページのトップへ