影響を受けるバージョン
バグの影響：IE8、IE7、IE6
現れ
フィルター」メソッドでPNGの透明度を修正した後、リンクの背景イメージの透明部分がクリックできなくなりました。
チュートリアル時間
2009年 7月19日(日) 15:03:44
説明
問題：IEのアルファ透過の問題は、リンクの背景に透過PNGイメージを使い、フィルターメソッドを使うことで解決しました。IEはどうなりましたか？イメージの透明部分がクリックできなくなりました。例を見てみましょう。
デモ
このバグの性質上、例は別のページにあります。
HTMLコード
<div><a href="#">Lorem Ipsum</a></div>
CSSコード
a {
display: block;
background: url(ring.png) no-repeat;
width: 100px; height: 100px;
text-indent: -999px;
}
<!--[if IE]>
<style type="text/css">
a {
background: none;
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale");
}
</style>
<![endif]-->
これは何でしょう？display:blockが適用されたリンクで、背景には黒い円のPNGイメージが設定されています。IE が再色付けする PNG の透明部分は IE-only フィルタ属性で固定されています。問題は、IE では円の透明部分がクリックできないことです。
治療
以下は、タイプアレンジによる上記バグの解決策です。
治療
決済日
2009-07.19 15:17:23
ブラウザのバージョンの解決
影響を受けるすべてのバージョン
説明
このバグは、リンクに背景を設定すれば直ります。例を見てみましょう。
このバグの自然な性質のため、例は別のページにあります。
HTMLコード
<div><a href="#">Lorem Ipsum</a></div>
CSSコード
a {
display: block;
background: url(ring.png) no-repeat;
width: 100px; height: 100px;
text-indent: -999px;
}
条件付注意事項
<!--[if IE]>
<style type="text/css">
a {
background: url(#); /* or point to a transparent gif. EDIT: see comments */
cursor: pointer;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="ring.png",sizingMethod="scale");
}
</style>
<![endif]-->
