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