DOCTYPE宣言とheightの関係性

Author:
doctype

htmlを書く際に、一行目にDOCTYPEというものを書きます。
これ、書いても書かなくても最近のブラウザなら問題ないように思えるのですが、時としてレンダリングの仕方が変わることもあるのです。
その一つとして、heightがあります。

例えば、

<ul>
<li class="item">aaa</li>
<li class="item">bbb</li>
</ul>

このitemクラスにheight=”100%;”というスタイルを設定した場合、chromeではどう表示されるでしょうか。
実はこれ、なんとDOCTYPEによって高さが変わるのですよ。

何も書かないときとHTML4.01TransitionalのDOCTYPEを書いた場合、親を継承するのでブラウザの高さがliタグの高さになります。
まあそれなりに経験のある人なら当然と思うでしょう。
ところがどっこい、HTML4.01StrictとHTML5のDOCTYPEでは親の高さを引き継がず、heightの%指定が無視されるのです。
10%も50%も100%もすべて同じ高さになるのです。(px指定は効きます)
これを知らないとなぜだ、と散々迷うことになるので要注意。(実際ハマった)

今までhtml4.01Strictなんて使う人は少なかったでしょうし、殆どの人は基本Transitionalだったかと思います。
しかしhtml5が普及したから、という理由でDOCTYPEを書き換えると、その途端デザイン崩れが発生する可能性があるのです。
よーく気をつけましょうね。

Share on Facebook
Pocket