IE6の仕様に泣いた

IE6ってほんと救いが無いブラウザだね。
バグとかCSSとかもそうなんだけど、今回問題だったのは透過PNGのアルファチャンネルを解釈出来ないとかいうバカ仕様。


PNGなんて普通サポートしてるでしょ。
そりゃ普通に表示はできるけど、CSSで背景画像に設定してたPNGにアルファチャンネル(例えば透過率50%とか)が入っていると灰色っぽく表示される。
FireFoxとかOperaとかNNとかその他ブラウザだと正常なのに、なんでIEは駄目なんだろうとか小一時間悩んじゃったじゃないか。
で調べてみたら透過PNGはダメなんだと。


GIFの透過画像で代用も出来ない。
GIFは透明か、不透明かの選択しかなくて、透明度を設定できない。
こうなったらもう最後の手段。
GIFでこういう画像を作った。

見やすくするために1000%くらいに拡大して着色してあるけど、要は透明部分と、白部分をタイル状にして50%透過させようという古典的手法。
で、これを設置したら見事半透過に成功。…ただし
IEで見るとスクロールするのも困難なくらい重い。
FireFoxOperaなら軽いのに、とことんIEはダメすぎる。
原因はIEレンダリングエンジンにあると思うんだけど、こんなんじゃ使い物にならないから更に別の画像も用意。

2x2ピクセルで重いなら、20x20ピクセルくらいにしてやれば良いと。単純に処理が1/10になるだろうから。
これでやっと半透過に成功。
IE6が透過PNGをサポートしてないからって、なんでこんなに苦労してんだ。
で、できたページはこんな感じ。
http://www.i-love-key.net/clannad_anime/

記事部分とかが半透明になってると思います。
ちょっと半透明にしようと思っただけなのに、こんなに苦労するとは思わなかった。