Webデザイン

グラデーションをIE8にも対応させたい時の対処法(hasLayout)

Webデザイン

IEのfilterプロパティaタグにグラデーションをかけようとしたところ、どうにもこうにもグラデーションがかからなくて苦戦しました。
filterプロパティはIE独自のプロパティのため、他ブラウザには影響しません。
この現象は、IE8とIE9で確認しました。

IE独自のhasLayoutプロパティが原因で起こるバグだったのですが対処方法を備忘録。

hasLayoutとはオブジェクトがレイアウト情報を持っているかどうかを示すもので、IEでのCSSのバグを回避するためにはhasLayoutの値をtrueにする必要があります。
hasLayoutの値をtrueにするには、CSSで特定のプロパティに下記の値を指定します。

hasLayoutをtrueにする

プロパティ
positionabsolute
floatleft or right
displayinline-block
widthany value or auto
heightany value or auto
zoomany value or normal
writing-modetb-rl

hasLayoutをtrueにする(IE7)

プロパティ
overflowhidden or scroll or auto
overflow-xhidden or scroll or auto
overflow-yhidden or scroll or auto
min-widthany value or auto
max-widthany value or auto
min-heightany value or auto
max-heightany value or auto

※ IE8以降でもIE7互換モードではhasLayoutプロパティが存在するため注意する(スタンダードモードにはhasLayoutプロパティは実装されていない)

こちらの記事を参考にさせていただきました!

comment

タイトルとURLをコピーしました