IE6でpng24を表示させる

以前仕事でpng24を使ったことがあったので、その際記事にしていたと思い込んでいました。丁度機会があったので記事にしておきます。pngが使えるようになると綺麗だし、軽いからいいこと尽くしな感じがするんだけど、IE6がサポートしてないのが痛いですね。IE7では使えるようになったとか噂を耳にしますが、当分IE6がターゲットブラウザから外されることもないと思いますので、まだ楽はできないようです。

上の画像はpng24です。IE6で見ると周りに薄い水色が出てくると思います。FirefoxやSafariの方は見比べてみてください。

これはIE6及びそれ以前のバージョンは複数のアルファチャンネルに対応していないからです。FirefoxやSafariなどでは普通に表示されます。
ですので、IE6用にカスタマイズしないといけません。

01.普通画像はimgタグで記述するだけです。

HTML

<img class="sample" src="images/png24.png" width="180" height="100" />

02.imgタグをdivタグで囲みます。その際にはdivにclassかidを付けてください。

HTML

<div class="sample">
<img src="images/png24.png" width="180" height="100" />
</div>

03.スタイルシートを記述する(スターハック使ってます。)
もしIE用に別のスタイルシートがあったらそちらに記述してもOK

CSS

</pre>
* html div.sample{
width:180px;
height:100px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/png24.png);
}

* html div.sample img{
display:none;
}

※少し解説
スターハックでIEのみに読み込ませている。divのボックスに画像と同じ幅と高さを指定する。filter:からはじまる1行の画像のパスは表示させるhtmlからの相対パスになります(絶対パスでも可)。
次の指定ではdisplay:none;がありますので、本来imgタグで表示される画像を表示させなくしてます。

調べてみると、ie独自拡張のbehaviorを使う方法など色々とでてきます。私も以前仕事で使ったものは違うものでしたし、ご自分にあったものでお試しください。

今回の記事はdnclを参考にさせて頂きました。
念のためにサンプルデータもあげときました。
※サンプルデータをご利用の際に発生した障害やデータ破損などについては、当サイトは一切の責任を負いません。

Related posts:

png24を使う リストタグでナビゲーションを作ったら隙間ができる CSSで画像置換のテクニックを使う clearfix