IEには様々なバグが報告されていますよね。
もうコーダーからしたら勘弁して下さいって泣きが入りそうになるくらいに...
背景色が指定された要素内でfloatがある時、要素内の文字が消えるとか、floatに後続するmarginの値が無視されるとか、widthを指定しているとボックスの中身にfloatしている要素があっても、自動的に高さが伸びるとか。
こういったIEのバグに有効な手段として、IE6まではheight:1%を指定する事で回避したり、IE7でもwidthを指定して回避したりと色々やってると思います。
その他、IE独自拡張のzoomを使った方法なんかもあります。
今まで理由とかは分からないけど取り合えず解決するんだって事で、widthやheight、zoomを指定しておけばいいんだ。
と認識していましたが、つい先日ちょっと気になる内容をみつけましたのでご紹介。
ソレはhasLayoutというIE独自拡張の一つ。
ググってもあんまりhit数が多くないので、あまりメジャーでは無いのかなーと。
で、中々GJな記事にめぐり合えなかったので仕方なく読めない英語を必死になって読んでみました。
その結果、hasLayoutがIEの様々なバグの元凶（大袈裟？）だったみたいです。
hasLayoutは、ソコにレイアウトが有るのか無いのかってのを判断しているようで、デフォルトの値がfalseでレイアウト無しになっているので「背景色が指定された要素内でfloatがある時、要素内の文字が消える」とかって現象が起こるっぽいです。
そして、heightやwidthを指定することでトリガーとなりhasLayoutの値がtrueになり、レイアウトが有るとみなされ表示されるようになると。
その他トリガーになるプロパティと値は、、、
| プロパティ | 値 |
|---|---|
| display | inline-block |
| height | auto以外 |
| float | left or right |
| position | absolute |
| width | auto以外 |
| writing-mode | tb-rl |
| zoom | auto以外 |
となっている模様。縦書きって、あんま使う事ない値まで...
はやりzoomも入ってますね。コレでzoomで解消出来るって理由が解決されました。
その他のバグもこのhasLayoutがfalseになってたり、trueになってたりするから引き起こっているような気がします。
ということで様々なバグもIEからしてみたら仕様だって事でしょう。
まぁ、CSSの仕様からしたらそんなの無いわけでやっぱり扱いとしてはバグなんでしょうけど。
今回hasLayoutの記事をみつけて、多少なり納得できる部分があったのでIEの不満がちょっと減ったかも。
にしても、hasLayoutチェッカーみたいなのあったら便利そうだよね(笑
英語全然分からずに勘で解釈してるんで、間違いあったらご指摘願います。