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

IEのfilterプロパティaタグにグラデーションをかけようとしたところ、どうにもこうにもグラデーションがかからなくて苦戦しました。

  • filterプロパティはIE独自のプロパティのため、他ブラウザには影響しません。

この現象は、IE8とIE9で確認しました。

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

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

hasLayoutをtrueにする

プロパティ
position absolute
float left or right
display inline-block
width any value or auto
height any value or auto
zoom any value or normal
writing-mode tb-rl

hasLayoutをtrueにする(IE7)

プロパティ
overflow hidden or scroll or auto
overflow-x hidden or scroll or auto
overflow-y hidden or scroll or auto
min-width any value or auto
max-width any value or auto
min-height any value or auto
max-height any value or auto
  • IE8以降でもIE7互換モードではhasLayoutプロパティが存在するため注意する(スタンダードモードにはhasLayoutプロパティは実装されていない)

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

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です