IEの独自フィルタでグラデーションをかけるのはキケンだ。

最近は規約がなければhtml5とcss3を用いるようにしている。
プログレッシブ・エンハンスメントという考えのもと、IE8以下に関しては角丸などを無理に実装せず、使用に支障のない内容にしている。

CSS3にはグラデーションが設定できるので、Firefox・safari・chromeについてはcss3で、IEには独自フィルタでグラデーションを設定する事にした。

そこで問題が発生。

IEにおいて、a要素のdisplay:blockが効かない事が発覚した。


テストソース:IE独自フィルタ使用をIE6-8でためしてもらいたい。

リンク領域を拡大しているはずなのに、IEではカーソルは指にならない
リンク領域を拡大しているはずなのに、IEではカーソルは指にならない

テキストにカーソルを持って行くと、IEでも指カーソルになる
テキストにカーソルを持って行くと、IEでも指カーソルになる

cssにはdisplay:blockとzoom1が設定されている。
通常、この設定だとリンク領域は拡大され、ボタンと同じような挙動にになる。
だが、今回の場合は領域がうまく拡大されていないようだ・・と思い、WebDeveloperで確認してみる。

Web Developerで確認したら、リンク要素blockになってるよ!
Web Developerで確認したら、リンク要素blockになってるよ!

・・・・なんで?
領域は拡大されてるのに、なぜボタンのような挙動にならないのだあああーーーーー。

—*—+—*—+— 小一時間経過 —+—*—+—*—

なぜ、リンク領域が拡大されないのか?
どうやら、IEの機能拡張を使った事に原因があるらしい。
そこで、IE用には背景にグラデーション画像を用意してみた。

テストソース:IE独自フィルタを使用しない!を参照して下さい。

IEでも大丈夫
IEでも大丈夫

なんてこったいorz…..

a要素のリンク領域を拡張する場合は、IEの独自フィルタ使っちゃ駄目ってことなのね。なんて面倒なorz….

というわけで、IEにはグラデーション画像を使う事で回避するしかなさそう。
あいやー。

コメントを残す

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