hasLayoutとは
hasLayoutとはIE独自のプロパティでそれぞれのオブジェクトが
レイアウト情報（＝要素の幅・高さなどに関する属性情報）を持っているか、いないかを示すものであります。
このプロパティは読取り専用のプロパティのため、他のプロパティのように宣言を書くことはできません。
値には「false」と「true」があり、デフォルトの状態では「false」となっております。
つまりデフォルトではレイアウト情報を持たない状態のため、
幅や高さが他の要素のレイアウトに影響されて伸び縮みし、表示が他の要素と重なってしまう場合があります。
■hasLayoutの値
false
デフォルト値。オブジェクトがレイアウトを持っていない。
true
オブジェクトがレイアウトを持っている。
hasLayoutプロパティの値を「true」に変更する方法
「false」の場合に様々なバグが発生するため、
CSSで他の特定のプロパティに特定の値を指定することで自動的に「true」に変える必要があります。
下記に常に「true」の状態であるプロパティと値を設定することで「true」に変えられるプロパティを挙げます。
■常に「true」の状態であるプロパティ
body, img, object, hr, input, button, textarea, table, tr, th, td, frameset, frame, iframe, marquee
■hasLayoutの値をtrueにする値
| プロパティ | 値 | 注 |
|---|---|---|
| width | auto以外の値 | |
| min-width | 任意の値 | ※IE7のみ |
| max-width | none以外の値 | ※IE7のみ |
| height | auto以外の値 | |
| min-height | 任意の値 | ※IE7のみ |
| max-height | none以外の値 | ※IE7のみ |
| float | leftまたはright | |
| position | absolute | |
| position | fixed | ※IE7のみ |
| display | inline-block | |
| overflow | hiddenまたはscrollまたはauto | ※IE7のみ |
| overflow-x | hiddenまたはscrollまたはauto | ※IE7のみ |
| overflow-y | hiddenまたはscrollまたはauto | ※IE7のみ |
| zoom | any value | |
| writing-mode | tb-rl |
IEの問題を解決する指定方法
IE6およびIE7で起きる問題の多くは、
該当する要素またはそれを含む要素のhasLayoutプロパティの値を「true」に変えるだけで解決できます。
しかし、「width」「height」などはインライン要素では無視されるプロパティであることと、
「float」「position」「writing-mode」などは表示に直接影響を与えてしまうため、
これらを考慮すると、バグに効果のある指定法は「zoom」プロパティであると考えられます。
* { zoom: 1; }
しかし、「zoom」はIE独自プロパティのためW3Cに準拠したCSSチェックではエラーがでます。
また、* { zoom: 1; }とした場合、全てのタグに「zoom」プロパティが適応するため、
IE7のズーム機能で拡大、縮小した際に表示くずれを起こす可能性があるので、
その場合は個別の箇所に指定が必要になります。
hasLayoutの参考ページ
■IEでのCSSのバグを回避するhasLayout│コリス
http://coliss.com/articles/build-websites/operation/css/143.html
■hasLayoutとは何か│ウノウラボ
http://labs.unoh.net/2007/09/what-is-haslayout.html
■hasLayout｜プロパティ｜CSS HappyLife ZERO
http://zero.css-happylife.com/property/haslayout.shtml
■haslayoutプロパティの値を「true」に変更する方法│nobu’s 備忘一覧
http://nobuko.biz/kihon8.html
■IE6…背景色が指定された要素内にfloatがある場合要素内の文字が消える│彩音WEB研究室
http://web.wixion.cc/paragraph_137.htm