IEで透過pngを使うとクリックできなくなるバグ

WEB制作の小技や機能 | 2010.09.24

透過gifだとギザギザが出てしまうWEBデザインも、pngを使うと、きれいに実現出来ます。
しかし、IEではpng画像が表示されないなど、まだまだ対応しきれていない面も多いです。
そこで、基本的には、unitpngfix.jsを使うのがお勧めです。

ダウンロード先
Unit Interactive :: Labs :: Unit PNG Fix

使い方は、htmlのhead内でスクリプトを呼び出し、
<script src=”unitpngfix.js” type=”text/javascript”></script>

jsファイル内の1行目にあるとおりに、clear.gifを置くだけです。

こちらのブログ記事でも使い方が書かれています。
css IE6で透過pngを使用する
[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

これでIEでもpngが扱えるのですが、
IE６では、スタイルシートで背景画像としてpngを指定すると、そのタグの中ではposition指定が効かなくなったり、aタグが使えなかったりするバグがあります。

色々調べましたが、このバグの解決策は今のところない様です・・・。
aタグが使えないのは、クリックが全くできなくなる事なので、致命傷になりえます。

わたしも結局、この部分はpngを諦めてgifで対応しました。
でも、その他の部分ではかなりpngを多用したコーディングが可能だったので、
ちょっと珍しいテイストのデザインに仕上がりました。
公開前のサイトなので、お見せする事が出来なくて残念ですが、pngを使ったデザインも悪くないと思いました。