IEでのCSSのバグを回避するhasLayout
Post on:2007年1月19日
sponsors
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。
これは、IEの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]
sponsors
