いまさらかもしれんですが感動しました、これを知っているだけでいままで「なぜ？」と戸惑いながらいろいろ思考錯誤してみるしかなかったIE6(と7)のCSSの問題が結構な確率で解決するように思います;
On Having Layout (http://www.satzansatz.de/cssd/onhavinglayout.html)
ものすごくおおざっぱに理解したところを反芻させてもらうと;
- IEにおいてはHTMLの要素に専用の「隠し」パラメータ "hasLayout"というものが存在する
- これがある要素に対してOn(true)になっているかなっていないかで、その要素の挙動が大きく変化する
- hasLayoutはデフォルトでは決められた少数の要素でしかOnになっていない（詳しくは本文参照）。何といっても、一番よく使われると思われるdiv要素でOnになっていない
- hasLayoutは特定のCSSのプロパティを指定してやることでOnにできるので、hasLayoutがOffになっている要素でこれを恣意的にやってやることによってIEにおける他のブラウザとの表示不一致の問題の矯正が可能な場合がある（その逆も真）
IEにおいてこのhasLayoutをOnにする為に、要素に対してCSSのどのプロパティを指定してやればよいのかという話も本文に詳しく解説されていますが、1.)一番無害に、2.)このhackによって他のブラウザでちゃんと表示できているものを（将来的にも）壊さないようするにという観点から、IEのconditional commentsを用いて、下記のようなCSSクラスをつくって適用する方法が紹介されていました。
<!--[if lt IE 7]>
<style>
/* style for IE6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style>
<![endif]-->
<!--[if IE 7]>
<style>
.gainlayout { zoom: 1; }
</style>
<![endif]-->IE5、IE6ではheightプロパティを、IE7ではzoomプロパティを指定してやることによって、恣意的にhasLayoutをトリガーしています。
自分はElementひとつひとつにgainlayoutのクラスを適用していくのは大変だと感じたので、下記のようにやることにしました（実際はIEのconditional commentsで別cssをよみこんでます）。
/* for IE6 */
#idA, #idB, #idC,
.classA, .classB, .classC{
height:0; /* gain layout */
}/* for IE7 */
#idA, #idB, #idC,
.classA, .classB, .classC{
zoom:1; /* gain layout */
}あまりに大雑把な理解なので詳細は本文を参照されることをおすすめします。特にIE6完全対応を迫られているような状況では知ってると知ってないでえらい違いなのではないでしょうか、エディターのみなさんに感謝です。
追記 (2009.11.20)
あとは自分は下記の２エントリーがとても参考になりました、やはりこういったものは場当たり的にひとつひとつ直していくと大変なことになるので、あるていど体系的な理屈と対処法を理解していたほうが圧倒的にスピードがあがりますね。
Leave a comment