イナヅマTVログ

[JavaScript] Memo, IE 8, 7, 6で32bit PNG Fade時の黒いボーダーを回避したい

| 0件のコメント

いまだに IE 6 の面倒をみてる心優しい開発者です。

IE 8, 7, 6で32bit PNGをフェードさせると画像の周りにジャギーって言うのか黒いボーダーができてしまいます。
背景にべた塗り(background-color)を設定すると回避できるけど、
それならワザワザ32bit PNGなんて使わない。

透明の背景色設定できればどうにかなるかと試してみました。
rgbaは使えないけどGoogle先生に伺うとすぐにステキなお答えが…

How to achieve cross-browser RGBA support with Compass
Cross Browser RGBa Support
RGBa & HSLa CSS Generator for Internet Explorer

ふむふむ filter 使えばできるのね。
“RGBa & HSLa CSS Generator for Internet Explorer”でrgbaをfilterのコードに変換してくれる。

#fade_container img {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    zoom: 1;
}

Generator は -ms-filter も出力するけど、IE 8はfilterでも理解できるのでいらないと思うんだよなぁ。

IE 8, 7はこの設定でフェードしても黒ボーダー付きませんでした。
IE 6はダメだった。
DD_BelatedPNG.js 使ってるからだよね。
これは諦めよう。

既に解決策はどっかにあるのかもだし、
IE 11 登場して世間的にはIE 8以下サポート外なんてのも多いのかも。
役に立たない情報でした。

【追記】
IE 6 + DD_BelatedPNGでもフェード時に黒いボーダーが付かないようにできました。
IE 6 は一つコンテナを増やせば良さそうです。

#fade_container .container {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    zoom: 1;
}
#fade_container .container img {
    background: transparent;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
    zoom: 1;
}

レガシーIEの32bit PNGもフェードできる。
あとほんのしばらくは役に立つのかもしれません。

もっと早く気づけば良かったなー

コメントを残す