以前、透過PNGのIE6対策にはこのJava Scriptで紹介したことがあるiepngfix.js。
結構使い勝手がよいので、ちょこちょこと使っていたのですが、最近になって納品済みサイトで問題続出。
一体どうしたことかと調べてみた。
iepngfix.jsを開いて18行目にgif画像についての記述がある。
http://www.isella.com/aod2/images/blank.gif
・・実は、このリンク先が無くなっているのだ。
先ほど関連記事を検索したところ、とあるQ&Aサイトに同様の質問があり、投稿日が8/24になっていた。
と、言うことは最近起こった話らしい。
このスクリプトに関しては、方々のサイトで紹介されている秀逸なスクリプト（だと思う）なのだが、この透過Gif画像についての言及が無いものが多い。
おかげで、パスをそのままにした結果、今回のようにサイト自体が消失してしまったためにgif画像が参照できず、「画像がありません」マーク+altが透過画像の上に出てしまうという奇妙な状況になったらしい。
と、言うわけで、透過gifの画像を用意して、自分のサーバーへアップロードし、iepngfix.jsを開いて18行目を環境に合わせて書き換える。
うちの場合は
http://www.m-r-design.com/img/blank.gif
別にファイル名は同じじゃなくてもいい。
hogehoge.gifとかフザケた名前でもOK。とにかく、サーバーにアップして、18行目を書き換えれば事足りる。
私のメイン環境がMacのFirefoxであったため、全く気づかなかった。これはOSがWindosでも同様。
この不具合はIEのみ表れる。
それは、iepngfix.jsはIEの独自フィルター「AlphaImageLoader」を利用しているためだ。
だから、IEにしか表れない。
IE7からは透過pngに対応しているので、このjavascriptは不要である。
が、未だにユーザーの多いIE6は捨てきれる状況ではないので、仕方なくこのスクリプトを使っているわけだ。
本来、このスクリプトが不要なIE7に対しても、IE独自フィルターを使ってるものだから、それに引っ張られる形で不具合が出てしまっている。
IE8は出ているが、いつ頃、IE6がターゲットブラウザから外れるかは未知数だ。
そのため、透過デザインをwebサイトで実現するには、このスクリプトを使うか、透けて見えている背景ごと切り取って、無理矢理「透過している状況」を作り出すかして実現するかしか方法がない。
なお、後者は頻繁に更新するサイトの場合、更新する度に手間がかかりすぎて、非常に非効率だ。
海外webデザイン界では「IE6は捨てようぜ！」キャンペーンが張られていると聞くが、Window vistaの普及失敗に伴う余波で、IE7やIE8への移行は遅々として進まない模様。実際、クライアントのほとんどはIE6だ。勿論、OSはXP。
そういう現実を見れば、「IE6は無視。CSSも読み込まないので、ブラウザのデフォルトで表示される」というサイトの作り方はできない。
しかし。
もうビックリしたじゃないか(￣▽￣;
ご利用は計画的に・・ってことですかね。