おすすめIE6の透過PNG表示対策

IE6


いまだにターゲットブラウザから外すことのできない鬱陶しいこのIE6ですが透過PNG対策をすっごい今更ですがお勧めのものだけあげていこうと思います。

DD_belatedPNGを使う

DD_belatedPNGが一番おすすめです。これはimg画像でもcssで背景でもどちらでも対応しています。
まず下記リンク先のDownloadからファイルをダウンロードしてください。
Drew Diller’s blog

ファイルを設置したら下記をhead内に記述。

<!--[if IE 6]>
　<script src="./DD_belatedPNG.js"></script>
　<script>
　　DD_belatedPNG.fix('img, .png_bg');
　</script>
<![endif]-->

これだけでpngを使っているimgタグ全てと背景でpngを指定しているボックス要素に対してpng_pgクラスを付与してあげれば表示できるようになります。
問題点

マウスオーバーで画像を変更させたい場合などはJavascriptを使わずcssで処理しないと動作しません。

AlphaImageLoaderを使う

AlphaImageLoaderはcssのみで対応できるのが利点。javascriptなどを使いたくない場合など手っ取り早く解決したいときにおすすめです。


書式

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(Enabled, sizingMethod,src);


プロパティ
Enabled(boolean) true | false
　フィルタの使用可・不可を指定。デフォルト'true'。

sizingMethod(string) crop | image | scale
　画像の表示方法。デフォルト'image'。
　crop・・・画像を指定された範囲に左上から等寸大に表示。画像が領域を超える範囲は表示されない
　image・・・画像を指定された範囲に左上から等寸大に表示。画像が領域を超える場合は表示エリアを画像サイズに合わせて拡大
　scale・・・画像を指定された範囲に拡大・縮小して表示

src(string)
　画像の場所。


表記例

background: transparent url(./sample.png) no-repeat left top !important;
background: none;
_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./sample.png', sizingMethod='scale');

これは何をしているかというと、一行目 "!important" はIE6は対応していないのでこれを利用してIE6以外にpng背景を指定し、IE6の背景はいちど"none"にします。
そしてハックを使いIE6用だけにAlphaImageLoaderを使ってpng背景を指定しています。


問題点

  • 背景のみの指定になります。
  • background-repeatで表示されるタイル並べやbackground-positionに対応できません。
  • AlphaImageLoaderを使ったブロック要素のpositionプロパティがrelativeかabsoluteに指定されている場合、子孫要素のa要素、疑似要素hover等が使えなくなります。


この2種類が使いやすくてとてもおススメです。 ＞＜