WEB業界人のみならず「痛いブラウザ」との悪評が定着しているInternetExplorer（通称「IE」）ですが、特にIE6以前のバージョンに関しては、恐ろしいほどおバカな仕様（バグ）を含んでいることにより、私たちWEB制作者をしばしば悩ませます。
多くの致命的バグを修正したことでやや成長した感のあるIE7も、2006年11月に日本語版が正式リリースされたものの普及率は伸び悩んでいるようです。Windows Vista（IE7標準搭載）もあまり普及してないのでしょうがありません。
そんな数々のIE独自仕様、CSSのバグに関しては深い知識と発想力さえあれば「CSSハック」など使わずとも攻略できるものなのですが、私の中で一つだけ手を焼いていたバグがありました。
それが「IE6以前のバージョンでpng画像が透過されない」というもの。
デザイン上、ドロップシャドウや半透明などの特殊エフェクトやアンチエイリアス処理などによって、gifでは綺麗な透過処理を行うことができない場合があります。そのような場合、png書き出しを使えばほぼ忠実な透過処理を行うことが可能になります。
しかし、前述の通り、IE6を含む旧バージョンのIEではpngのアルファチャンネルに対応しておらず、知らずに使うと非常に残念なことになってしまいます。
この対応策としてはいくつかの方法が挙げられていますが、そのほとんどが面倒なものであったり、またCSSハックを使用しなければいけなかったりと、いろんな意味で難があります。
そんな中でも私が「これは使える」と思ったものがありますのでご紹介。
これは“pngfix”というJavaScriptを使用した対策なのですが、非常にシンプルで簡単です。
- まず、http://homepage.ntlworld.com/bobosola/pnghowto.htmにアクセスして“pngfix.js”ファイルをダウンロード。
- 次に、そのjsファイルをサーバにアップロード。
- あとは、該当HTMLファイルのhead内に
<!--[if lt IE 7.]> <script defer type="text/javascript" src="pngfix.js"></script> <![endif]-->
を記述しアップロード。
以上、これなら手軽に対策できますね。
ただし、もちろんJavaScriptをオフにしているブラウザでは残念なことに。
それはそうと、優れた拡張形式にもかかわらずこのpngがイマイチ一般に浸透してないのは、もしかしたらIEという強敵がいたこともその理由の一つなのかもしれませんね。
|