ajaxについて

IEでPNG画像を使用

IE7.js使用時のさらなる回避

googleがmicrosoftのIE6以前のバージョンのバグに対応するJSを公開してくれている。

http://code.google.com/p/ie7-js/

PNG画像の透過が表示できないなど、多くの問題をかかえているIE6は、ユーザー数の多さのため無視できない存在だが、そのバグのためデザイン制作側では非常に難題となっている。

このJSを直接googleから読み込み、使用する画像名に-transを不可すると使用できるようになる。

↓ここをコピー

<a id="IE7.js"><!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript">
</script>
<![endif]--></a>

↓画像ファイル名に-transを付加する
例:haikei-trans.png

これでpngが使用できるようになる。
カンタン!!

また、IEのfilterAlpherImageを使用して実現しているため、repeat等、各属性値は使用できない。

さらに、同様の理由により、<span style=”color: #ff0000;”>背景画像として設定した画像が要素の全面にくるためタグ等、クリッカブルが反応しない状態になる</span>。

そこで、外に要素を設置し、その背景CSSにPNGを設定、
内包する要素にposition:absolute;もしくはrelativeを適用することで回避することができる。

例:

<div class=”haikei_out”> ←このクラスにpng背景設定
<div class=”haikei”>←このクラスにposition:absolute;設定
中身
</div>
</div>