読者です 読者をやめる 読者になる 読者になる

以下斜め読んだ内容

pseudo translation of useful posts, book reviews, remarks,etc. twitter: feeddict

line-heightプロパティの実装状況

CSS

メモ:〜IE7で実装にバグあり。

・よくありそうな状況
→文中に画像が入っているテキストで行間を調節している場合に行間の調整が効かなくなる。

・バグが発生する条件
→あるブロックレベル要素が置換要素(置換インライン要素。img、input、etc.)を含むとき。

・バグが発生するときの表示
→ブロックレベル要素の場合line-heightの値が無視される。
→包含された置換要素の内在寸法の高さにline-heightが一致する。
→half-leading(line-heightからfont-sizeを除いた部分の上半分のこと)がゼロになる。

・回避方法?
→問題を起こしている置換インライン要素の上下に余白をつける。
 ※IE6、IE7、モダンブラウザ向けにハックを使うことが必要