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

goto_jp 314views 更新:2014年11月17日
.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自体でも全くフォローされていない可能性もありますし、基本的にはもう利用を避けるべきプロパティだと思われます。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません