IE PNG Fixを使ってみる - 身の回り4畳半近辺の日記

　社内向けWebページで、見栄をよくするためフリーでダウンロードしてきたアイコンのPNGファイルを使っています。これが透過PNGだったりすることが多くて、今まではIE 6で背景がグレーに表示されるため、アイコンを修正してバック色で塗りつぶしたりしていました。が、社内的にはIE 7が大部分となった今日、IE 6以下のためにそれをするのも面倒だ。ということでCSSとJavaScriptによるIE 5.5とIE 6で透過PNGをちゃんと見せるようにできる対処法を導入しました。
　ネットで調べてみましたら、IE PNG Fixが有名どころみたいで早速、v2.0 Alpha 3をダウンロード。ZIPファイル内のiepngfix.htmlが説明書とデモを兼ねています。それとiepngfix.htmlのソース自体も参考になります。
　この内容によると、
1. iepngfix.htcとblank.gifをサーバーに配置する
2. HTMLファイルに以下のように追加

<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style>

3. iepngfix.htcがこのHTMLファイルと違うディレクトリーにある場合は相対で指定する
4. blank.gifの場所もHTMLファイルと違うディレクトリーにあるのならiepngfix.htc内の以下のところを修正しておく

IEPNGFix.blankImg = '/images/blank.gif';

5. CSS1のbackground-repeatとbackground-positionにも使いたいなら、iepngfix_tilebg.jsもコピーして以下のようにHTMLファイルに追加しておく

<script type="text/javascript" src="iepngfix_tilebg.js"></script>

　以上です。
　自分のところは、background-repeatとbackground-positionには不要で実質imgだけが対象でしたので、iepngfix.htcとblank.gifの2つのファイルだけを/iepngfixというディレクトリーへコピーして、HTMLファイルに

<!--[if lte IE 6]>
<style>
img {behavior: url(/iepngfix/iepngfix.htc)}
</style>
<![endif]-->

として、iepngfix.htcの中で,

IEPNGFix.blankImg = '/iepngfix/blank.gif';

と修正しただけで、IE 6でちゃんと透過PNGが使えるようになりました。iepngfix.htcはJavaScriptファイルで、4941 byteぐらいのサイズです。中はコメントとかタブとかそのままですので、圧縮化して容量を少なくすることも可能ですね。