ハック
2014.11.17
1,261
CSS

CSS:IE専用「filter」によるグラデーションが一定条件下でバグる

.xxx a {
  ～
  filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFFFFFFF', endColorstr='#FFF0F0F0');
  ～
}

IE8以前では、「filter」プロパティを使うことでCSSによるグラデーションを表現することが可能でした。
しかしこの記述が原因で表示バグが発生する現象がありました。IE専用プロパティなので当然IEだけでバグります。

ボタンにグラデーションを適用していたところ、外部CSSの記述どころかインラインCSSによるimportant指定すら無視してフォントカラーがグレーになってしまうというバグでした。

自分が確認した条件は下記でした。

positionがabsolute、もしくはfixed
ul/li内のレイヤー

上記のいずれかだけの状態では発現せず、両者が合わさった時のみ現在確認できました。

対策は「filterを使わない」というだけです。
今回自分の場合、対象の要素のみピンポイントに下記の記述で回避しました。

.xxx a {
  filter: none !important;
}

filterはIE専用プロパティでIE10以降はCSS3もだいぶ効くのでIE自体でも全くフォローされていない可能性もありますし、基本的にはもう利用を避けるべきプロパティだと思われます。