透過 PNG を IE6 で扱う

最近知ったんだけど、 PNG 画像の Transparent 部分って IE6 ではきちんと透明に表示されないらしい。
これをどうにか FF とか他のブラウザでも表示されるようにしながら対応する方法。

基本的なやり方は CSS で background と filter を使って、以下のようにすれば表示はされるようだ。

background: transparent;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
width: 160px;
height: 120px;

でもこれだけじゃ当然 FireFox では表示されない。じゃーどうするか。

ここで紹介する方法は IE では上記の CSS が反映され、 FF では img タグで画像を表示する方法。
まず HTML の部分を見てみると

HTML

<span id="hello"><img src = "images/hello.png" /></span>

という感じ。
考え方としては hello の背景に先ほどの CSS を適用し、 IE だったら img の display を none にする。

CSS

span#hello
{
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/hello.png',sizingMethod=scale);
    width: 160px;
    height: 120px;
}
span#hello img
{
    display: expression("none");
}

こうやって IE でしか動かない expression を使ってやるとうまくいく。
にしてもめんどくさい。

コメント