About the Site

This weblog is edited and run by members of reallyenglish, a company offering a total English learning solution based in London, Beijing, Shanghai and Tokyo. Visit our corporate site to know more about what we do.

Notes are posted by members from various cultural and geographical backgrounds, and the topics range from education, business and international communication to software development, the internet culture, and more.

Staff

Masatomo Nakano http://twitter.com/masatomon /m/mt-static/support/assets_c/userpics/userpic-2-100x100.png simonl davida jeremyw Go Kameda gavin b No name tomoyukis

 

On Having Layout

| No Comments

いまさらかもしれんですが感動しました、これを知っているだけでいままで「なぜ?」と戸惑いながらいろいろ思考錯誤してみるしかなかった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における他のブラウザとの表示不一致の問題の矯正が可能な場合がある(その逆も真)
といった話だと思います。hasLayoutのOn/Offが実際にどのような影響を及ぼすかについては本文にいくつかの例がリストとしてあがっています(まだincompleteな状態とのことです、具体例を全てあげていくのは困難なのではないでしょうか)。自分も良くわからないままに実際に試してみただけなのですが、div要素やp要素のhasLayoutをOnにしてやることで、IE6/7でのFirefox3との表示の不一致の問題の多く(margin, float関連)が解決したので驚きました。今では、CSSの編集時にIEで何か問題が起こると、ひとまずこのhasLayoutのOn/Offを試すようにしています。

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)

あとは自分は下記の2エントリーがとても参考になりました、やはりこういったものは場当たり的にひとつひとつ直していくと大変なことになるので、あるていど体系的な理屈と対処法を理解していたほうが圧倒的にスピードがあがりますね。

Leave a comment