最近は規約がなければhtml5とcss3を用いるようにしている。
プログレッシブ・エンハンスメントという考えのもと、IE8以下に関しては角丸などを無理に実装せず、使用に支障のない内容にしている。
CSS3にはグラデーションが設定できるので、Firefox・safari・chromeについてはcss3で、IEには独自フィルタでグラデーションを設定する事にした。
そこで問題が発生。
IEにおいて、a要素のdisplay:blockが効かない事が発覚した。
テストソース:IE独自フィルタ使用をIE6-8でためしてもらいたい。
cssにはdisplay:blockとzoom1が設定されている。
通常、この設定だとリンク領域は拡大され、ボタンと同じような挙動にになる。
だが、今回の場合は領域がうまく拡大されていないようだ・・と思い、WebDeveloperで確認してみる。
・・・・なんで?
領域は拡大されてるのに、なぜボタンのような挙動にならないのだあああーーーーー。
—*—+—*—+— 小一時間経過 —+—*—+—*—
なぜ、リンク領域が拡大されないのか?
どうやら、IEの機能拡張を使った事に原因があるらしい。
そこで、IE用には背景にグラデーション画像を用意してみた。
テストソース:IE独自フィルタを使用しない!を参照して下さい。
なんてこったいorz…..
a要素のリンク領域を拡張する場合は、IEの独自フィルタ使っちゃ駄目ってことなのね。なんて面倒なorz….
というわけで、IEにはグラデーション画像を使う事で回避するしかなさそう。
あいやー。