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

HTML・CSS

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のズーム機能で拡大、縮小した際に表示くずれを起こす可能性があるので、
その場合は個別の箇所に指定が必要になります。