WebページのデザインはDTPとは根本的に違うというのは語り尽くされた話ですが、 これの一番の原因はフォントやキャンバス(ブラウザの)サイズを見る人が選択できる点にあります。
このことにより例えfont名やfont-sizeをがちがちに指定したとしても次のような問題が発生します。 特に、Windows版のIEにバグがあり、 このブラウザでのみ表示確認を行っていると陥りやすいミスですので注意してください。 (※この記事で紹介する内容は大半がwidthプロパティでも同様で、読み替えることができます)
たとえばこんなスタイルシートを指定したとします。
<div style="font-size:12px;height:18px;border:1px red solid;">
このコンテンツのfont-sizeは12pxです。<br>
この行はheight:18px;に収まらないかもしれませんね。
</div>
この例では12pxのフォントサイズを持つ内容が2行ありますが、 それに対してdiv要素には高さが18pxしか与えられていません。 このスタイルがブラウザでそのまま解釈されると、普通はdiv要素の高さが足りていないことになります。
さて、この例はあなたのブラウザでどのように表示されたのでしょうか。 以下は様々なブラウザでのスクリーンショットです。
| MS IE6(Win) |  |
|---|---|
| MS IE5.1(Mac) |  |
| Mozilla(Win) |  |
| Opera6.03(Win) |  |
このスクリーンショットでWindows版のIEでのみ、内容が入りきらない場合、 div要素の高さそのものを拡張していることがわかるかと思います。 理由は後述しますが、これはWindows版IEのバグで、他のブラウザの表示が正しいのです。
そしてこれは単なるはみ出した見た目の問題だけではなく、 アクセシビリティにおいてもっと深刻な問題を抱えています。 ブロックフォーマット化文脈に以下のように書かれています。
二つの兄弟ボックス間の上下の距離は，'margin'特性によって決定される。ブロックフォーマット化文脈における隣接するブロックボックス間の上下マージンは，つぶされる。
つまり、内容のはみだしたブロックレベル要素の次に続く要素の配置もそのmarginプロパティによってのみ決定されるため、 はみだした内容が後続の要素と重なってしまう可能性があります。
具体的な例で見ると次のようになります。
<p style="color:blue;font-size:12px;height:12px;border:blue solid 1px;">
Text.<br>
Text.<br>
Text.<br>
Text.<br>
<p>
<p style="color:red;font-size:12px;border:red solid 1px;">
Text.<br>
Text.<br>
Text.<br>
</p>
Text.
Text.
Text.
Text.
Text.
Text.
Text.
こうなってしまうと、もはや読むことはできませんし、 サイト内でのメニューがこういった状況になってしまうとサイト内の移動すらままなりません。 そのページを見に来たWindows版IE以外の人は確実に帰ってしまいます。
Mac IE5.1ではこのような仕様通りの重なり方はせずに、はみ出した内容を避けるように次の要素が配置されるそうです。
よほど特殊な理由が無い限り、テキストを内容に持つブロックレベル要素に対して安易なheight値の指定は避けるべきだということがわかるかと思います。 height値はできる限りブラウザの解釈に委ねることがWebサイトデザインの基本です。
さて、それではWindows版IEの表示の方がバグであるという理由を説明します。
CSS2ではこういった内容が収まりきらない場合の表示方法を制御するためにoverflowというプロパティが用意されています。 このoverflowプロパティの定義は次のようになっています。
- 'overflow'
Value: visible | hidden | scroll | auto | inherit Initial: visible Applies to: block-level and replaced elements Inherited: no Percentages: N/A Media: visual
このプロパティの初期値はvisibleです。 これの説明は以下のように記載されています。
この値は，内容が切り取られないこと，すなわち，ブロックボックスの外側にもレンダリングされることを示す。
これは上記スクリーンショットでMozillaとOpera6.03、そしてMac IE5の表示が正しく、 Windows版IE6の表示がおかしいことを明確に示しています。 これは上記仕様の下に例示されている画像による例を見ればより明らかです。
Windows版IEがサポートするのはCSS1だという意見もありますが、CSS2のoverflowプロパティを認識している以上、 overflowに関しては正しく動作する必要があります。ですからこれは仕様なんかではなく単なるバグです。
ところで、table要素やtd、th要素(セル)はこれとは事情が異なります。 CSS2仕様書の17.5.3 表の高さのアルゴリズムを見るとわかるように、 table要素やセルの高さが内容に足りていない場合の表示はブラウザ依存ということになります。