これまでiepngfix.jsというIE6で透過PNGを使えるようにするJavascriptがありましたが、
CSSで背景で使用すると間延びしてしまったりと色々問題が発生しました。
その問題のせいで、使いどころには制約がありましたがiepngfix_tilebg.jsならそれを解消してくれます。
設置もそんなに難しくありませんでした。
http://www.twinhelix.com/test/
上記サイトよりIEPNGFix v2.0 Alpha（ZIP形式）をダウンロード＆解凍して、
iepngfix.htcとblank.gifとiepngfix_tilebg.jsを取り出し、各サイトに放り込みます。
初期状態だと、この3つのファイルは同じ階層の場合で設定されているので、
blank.gifやinpngfix.htcの階層を移動させた場合はそれぞれパスを変更しなければいけません。
【 フォルダ構成 】
html
┣index.html
┣iepngfix.htc
┣img/blank.gif
┗js/iepngfix_tilebg.js
【 html側に記述する内容 】
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
imgタグでhtml内にpngを挿入する場合に必要。htmlと同階層にある場合で記述しています。
<script type="text/javascript" src="js/iepngfix_tilebg.js" charset="utf-8"></script>
bakground等でpngを挿入する場合に必要。jsフォルダに格納した場合で記述しています。
【 iepngfix.htc内の記述を変更 】
16行目のblank.gifのファイルパスを格納した場所に変更。
IEPNGFix.blankImg = 'img/blank.gif';
※blank.gifをimgフォルダに格納した場合で記述しています。
iepngfix.htcからblank.gifを、htmlファイルからiepngfix_tilebg.jsを、
このそれぞれを呼び出すパスを制作しているファイル構成に合わせて書き換えるだけで
htmlファイル内の全てのpngファイルがIE6でも透過されます。
【重要な問題】
- 問題1：ページを開くのが重くなった。
- 問題2：IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。
- 問題3：ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。
問題1「ページを開くのが重くなった。」の解決方法
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
を、透過PNGを使用している場所のみに書き換える
例）
<style type="text/css">
div#mainImg img,
div#contentsBg{behavior: url(iepngfix.htc);}
</style>
問題2「IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法
【 html側に記述する内容 】
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
を、以下のように書き換える。
<!--[if lte IE 6]>
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
<![endif]-->
意味としては、IE独自の条件分岐コメントでIE6以下のバージョンの時のみ適用するというもの。
問題3：「ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法
print.cssを用意してhtmlファイルにリンク、そのCSSの中に以下を記述。
script {display:none;}
以上で、印刷時にも表示されます。
