ホームページ制作 サングラフィカ

サービス紹介
制作実績
会社案内

IE6で透過png画像を表示

IE6で透過png画像を表示すると、99%以下の透過を設定している部分が、グレー、または水色みたいになってしまう。これを回避する留に色々と対策が講じられていますが、色々試した結果、Google CodeのIE7.jsとIE8.jsが一番良いかなと。
実装方法は
1.ヘッダーに下記を記述
IE7.jsの場合
IE7.jsはIE5、6の動作をIE7に適応させるスクリプト。
<!-[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script>
<![endif]->

IE8の場合
IE8はIE5~7をIE7にないCSS特性に対応するようアップグレードしてくれるスクリプト。
<!-[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js" type="text/javascript"></script>
<![endif]->

上記は絶対パスでも動作しますが、同じデータをローカルに保存しても使用できます。ただし、このときjsソース内に書かれているようにblank.gifを相対で設置&書き換えてあげる必要がありそうです。

2.次に透過させたい画像のファイル名の末尾を「-trans.png」に変更。
これだけ。

CSS背景使用、ボタンとしての配置などぱっと見問題ないんですが、CSS背景を引いたclass内でのテキストリンクがきかない症状が確認できました。透過pngを使用しているエリアの上に透過gifが配置されるようで、これが鑑賞しているようです。
Zindexなどいろいろ試しましたが、今回は解決せず。。。

使用方法など詳しい解説は下記の参照サイトをご覧下され。

参照サイト:440design様

こちらの記事もご覧下さい