まとめた人は *sRLIBRmYXxh* です。
この文書は、 IE Escaping Floats Bug のごく簡単な邦訳です。 端折っているので、英語が読める人は原文を読むことをおすすめします。 なお、この文書は原文の作者に無許可で公開しています。
ボーダーとマージンを設定したボックスの中に、左フロートの50ピクセル四方のボックスが沢山入っていて、最後に回り込みを解除しています。MozillaやOperaでは正しく表示をしますが、WinIE(以下IE)では表示が崩れます。
.floatholder {
border: 2px solid #000;
margin: 1em 50% 1em 1em;
background-color: #CCC;
color: #000;
}
.floatbox {
float: left;
width: 50px;
height: 50px;
margin: 2px;
background-color: #666;
color: #FFF;
}
IEには大きく2つの表示上の誤りがあります。 まず、外側のボックスが最後の行のフロートボックスしか含んでいません。 もう一つは、フロートボックスがスクリーンの右端まで続いでいます。
さらに悪いことに、IEではウィンドウがさまざまな横幅のときに、横方向のスクロールバーが出現します。 IEでこのページを閲覧している人は、ブラウザのウィンドウの幅を色々と変えてみるとよく分かると思います。
このIEでの表示の崩れは、外側のボックスの大きさを指定していないことが原因で、widthを指定すれば正しく表示をします。 しかし、レイアウトデザインの際に、widthを指定しない方が望ましい場合もあります。 そのような場合に、widthを用いないでこのバグを回避するには、どうすればよいのでしょうか？
In fact a height can be given to IE/win and not affect the displayed height of the container. This is possible because IE has another non-standard behavior concerning boxes and dimensions. When IE/win sees that a box has a stated dimension that is not large enough to enclose the content of the box, IE/win goes ahead and wrongly enlarges the dimension so that the content does not overflow the box borders. You might think this is a good idea, but if the box is a float and it gets enlarged beyond its stated size it may be forced to drop down the page to where it has more room, wrecking the layout. Anyway, Since IE/win will behave this way, a very small height can be applied to the container and IE/win will just make the box taller anyway. Thus a small height does not change the appearance of the box, but the escaping floats bug is fixed! All that remains to complete the fix is to hide the height from all browsers except IE/win. So here is the Holly hack proper:
外側のボックスに、ごく小さなheightを設定すると上記の問題は解決します。WinIEにのみ適用させるには、以下のように書きます。
/* Hides from IE-mac \*/
* html .floatholder {height: 1%;}
/* End hide from IE-mac */
最初の行はCSSのコメントですが、コメントの終了の印、*/の直前に、バックスラッシュがついています。
これにより、MacIEはコメントの終了の印に気がつかず、コメント部分がまだ続いていると判断します。
そしてMacIEは、次のコメント終了の印が出てくるまでのすべてを、コメント部分として無視します。
最後の行は普通のコメントで、このコメントの終了の印は、MacIEに再びCSSコードの解釈を開始させます。
2行目は、全称セレクタの次にhtml、さらにその次に対象となる要素がきています。
このセレクタは、以下のような要素を指します。
1つ目の項目は、問題ありませんね。 しかしどういうわけか、Win/MacIEには、2つ目の項目のような奇妙な要素が見えているようで、このセレクタはWin/MacIEではうまく働き、他のブラウザでは働きません。 MacIEは、この文書のようなfloatのバグを持っておらず、WinIEのようにボックスの大きさを無理やり大きくすることもないので、heightの指定を見せないようにする必要があります。