IEでのCSSのバグを回避するhasLayout

IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。
これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。

• hasLayoutとは
• IEでのCSSのバグを回避するhasLayoutの値
• CSSのバグに効果のあるhasLayoutの指定方法
• hasLayoutの参考ページ

hasLayoutとは

hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。
hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。

hasLayoutの値（read-only）

false

デフォルト値。
オブジェクトがレイアウトを持っていない。

true

オブジェクトがレイアウトを持っている。

IEでのCSSのバグを回避するhasLayoutの値

前述した拡大・縮小時にレイアウトが重なってしまったり、フロートした要素がはみ出てしまったりするバグは、このhasLayoutの値がfalseの場合に起きます。

これらのIEでのCSSのバグを回避するためには、hasLayoutの値をtrueにする必要があります。
hasLayoutの値をtrueにするには、CSSで特定のプロパティに下記の値を指定します。

hasLayoutの値をtrueにする値

property	value
display	inline-block
height	any value
float	left or right
position	absolute
width	any value
writing-mode	tb-rl
zoom	any value

IEのCSSでのバグを回避するためには、例えば「height」の値に「1%」を指定し、「hasLayout」の値を「true」にして回避します。

上記の表の中でよく使用されているものは「height="1%"」や「widthの値を指定する」などがあります。

CSSのバグに効果のあるhasLayoutの指定方法

hasLayoutを変更するプロパティには、「float」「position」「writing-mode」のように実装するレイアウトでその値を指定できないなどの制限があるものもあります。
また、「height="1%"」のように特定の箇所には使用できないものもあります。

そこで、「zoom」に注目してみました。
「zoom」は指定した要素を拡大縮小の指定をするものです。

ほとんどのレイアウトでは、拡大縮小せず100%の状態でユーザーに利用してもらうことを前提に制作していると思うので、この「zoom」を利用して指定する方法がよいと思います。

CSSのバグに効果のあるhasLayoutの指定方法

*{zoom:1;}

「*」は全てのタグに適応する意味になります。
全てを対象にするのが具合の悪い場合は、個別の箇所に指定してください。

※「zoom」は、IE独自のプロパティのためw3cのCSSチェックなどではエラーがでますが、使用する上では不具合は特にありません。

hasLayoutの参考ページ

hasLayout Property
[MSDN Library]