いまだに 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もフェードできる。
あとほんのしばらくは役に立つのかもしれません。
もっと早く気づけば良かったなー