透過PNGをIE6で表示する3つの方法

デザイナーの植村です。


今や当たり前のように使われている透過PNGですが、

Internet Explorer 6以下のバージョンでは、透過が正常に再現されません。

そのためJavascript等を使って擬似的に再現する必要があるのですが、

そのやり方にも様々な選択肢があります。


今回は、その中でも特におすすめのものを3つピックアップし、

それぞれのメリットを挙げていこうと思います。




1, IE7.js

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

IE6以下のブラウザをよりWeb標準に近づけるスクリプトです。

透過PNGだけでなくXHTML/CSSの解釈も、

IE7のそれを再現できるようになります。


今回リストアップするものの中でも特に実装がお手軽に出来ます。

まずヘッダーに以下の記述を追加。




<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE7.js">
</script>
<![endif]-->



あとは透過させたいPNGのファイル名を「○○-trans.png」とするだけです。


IE8.jsとIE9.jsもあります。


メリット:

・実装がお手軽

・透過PNGの問題だけでなくCSSのバグ等も解消できる




2, DD_belatedPNG.js

http://www.dillerdesign.com/experiment/DD_belatedPNG/

反映させる要素名やid名をセレクターで選択できる、

非常に使い勝手のいいスクリプト。

ヘッダーに以下の記述を追加します。



<!--[if IE 6]>
	<script src="○○○/DD_belatedPNG.js"></script>
	<script>
		DD_belatedPNG.fix('img, .png_bg');
	</script>
<![endif]-->



上記の「’img, .png_bg’」の部分に対象のセレクターを選択します。

詳しく書かれている方がいらっしゃいますのでご参考にどうぞ。

http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/


メリット:

・対象をセレクターで選択できる

・処理が軽い

・背景リピートにも対応




3, Unit PNG Fix

http://labs.unitinteractive.com/unitpngfix.php

おそらくもっとも軽量です。

まずはヘッダーにこちらのタグを設置。


<script type=”text/javascript” src=”unitpngfix.js”></script>


あとは1×1の透明GIF画像を用意するだけ。

ファイル名、パスはjsファイルの一行目を変更することで設定可能です。

デフォルトは「images/clear.gif」になっています。



メリット:

・スクリプトが超軽量(2KB)

・背景リピートにも対応




マイクロソフト自体の呼びかけもあり、

日本国内のIE6のシェア率はかなり下がっていますが、

それでも対応に迫られる場面はあると思います。

その時は是非試してみてください!

コメントを残す

Copyright©2004- 2013 海外のホームページ作成|㈱メディアウェイブ All Rights Reserved.