WEBサイトの画像にPNGを使用する時 IE6がウザイ

IE6のPNG関連で悩んだら、DD_belatedPNG.js に乗り換えましょう。
今までのストレスを何も感じさせず制作ができます(笑)

ダウンロードはこっち。
http://dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a

使い方は簡単で、
head間に

を記述。

背景にPNG使いたいタグに class="png_bg" を追加するだけ。

タイトルのまんま、ここんとこIE6に悩まされてました。
PNGを使えばデザインの幅はぐっと広がる。
PNG解禁を待つ声ゎかなり多い。

しかーし。今回は理想を語るのではなく
使わなければならない状況に陥ったのでメモ書きです。

今までIE6でPNGを使う時、
unitpngfix ってのを使ってましたが、
バグ多くて毎回困る始末。。。

不思議なマージンが発生したり。
CSSロールオーバー背景使えなかったり。
background position無効になったり。
IE7ハックも使えなくなっちゃたり。
IE6でPNGを表示させるためのリスクにしてはありえないでしょ。

他にもいくつかJSはあったものの。
どれも微妙っすよね。探すのすら嫌になってました。

IE6のために用意してるのに、それらをカマスことで
IE7,8にもバグが出てくる始末。

悩みに悩んでphpでIE6の時だけそのJS読ませることで良しとしようと
頑張ろったんだけど、今回z-index使わなければならないデザインで。
Wで重なり残業パレード。。。

DD_belatedPNG.js ゎIE6の時のみ読み込ませるスクリプトもセットになってて。
画期的ですよ。


まぁ。一応 unitpngfix 使おうとしてた時のブラウザ判別してIE6だけ読み込ませるPHP。
のっけときます。書いてもらったのでね・・・。
意外な時に使えそうだし。なきものにするのはなんか切ないのでね。



html側にはJavascriptを読み込ませたい位置で


まぁ。結論もっと早くDD_belatedPNG.jsに出会ってればよかったわけで。

これでIE6もクリア。
IE7、8、FireFoxも無事。
MacもSafari 、FireFox無事。
ついでにGoogle Chromeも無事。

これでOK。

マイコミジャーナル2009年9月のブラウザシェアに
http://journal.mycom.co.jp/news/2009/10/01/067/index.html

# IE6 (24.42%↓)
# IE7 (19.39%↓)
# IE8 (16.84%↑)

こうあった。
撤退してしまえ。

みなさん。
IE離れしましょー。
Check |

prev entry

next entry

Comment