Site icon Tips Note by TAM

hasLayoutを利用してIEのバグを回避する

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