てんぽ: WinIEの崩れをheight: n%で直す

WinIEではフロートや位置指定されたボックスのコンテナブロックに幅が指定されていないと「ひどいこと」になりがちです。 コンテナにwidth: 100%で直るとはいえ、それだとボーダーやパディングを同時指定できない。 幸い（?）Quirksモードではwidthがborder-boxで計測されるので、「IE Quirksのみにwidth: 100%」でうまくいく。 でもこの方法では「ブラウザ振り分け」とか「Standardsモードで崩れる」とかあってなんとなくイヤだった。

実はこういう場合、height指定でも直るらしい。 しかも、heightを%単位にすれば、CSSを仕様どおりに解釈できるブラウザには無害というのが素晴らしい。

• height: n%;の正しい仕様

つまり、親要素（コンテナの親）のheightがauto（初期値）の場合、その子（コンテナ）でheight: n%とやっても、（まともなブラウザなら）その算出値はautoになるので弊害はない。 そしてIEはコンテナにheight: n%と書いてあるだけで何故か例のバグが直る。

問題はどれだけのブラウザがheight: n%を仕様どおりに解釈できるか。Mozilla、Opera7、IE6（いずれもStandardsモード）は問題なし。 IE6 Quirksモードは駄目だけど、height: 1%とかすればoverflow: visibleのバグがいい感じに作用してうまくいく。

実はこれ、「Holly hack」と呼ばれているらしい。

/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */

こんな風にMacIE避けをした上でIEだけに読み込ませてるけど、単に.floatholder {height: 1%;}でいいのでは。 MacIEに別のバグ（heightの%値指定が要素の幅に対する%値になる(IE5)）があるというなら、 子供セレクタでheight:auto;を上書きすれば充分だと思う。

というわけで、サンプル。 背景色と背景画像、ボーダー、パディング指定のあるdivの中に、通常の見出し、左フロート、右フロート、クリアーの各ボックスがある。

• IE6のバグ発現（Quirksモード）
• IE6のバグ発現（Standardsモード）
• height:1%でバグ対策