はじめてのIE6ハック

IE6がひどいひどいとは聞いていたけど、そもそも手元のPCにIE6なんぞ入ってないし、使っている人も少ないんで今までまったく気にしていなかった。

しかし、手持ちの1台にIE6が入っていることに気づいた。非力なPCゆえか、一度IE7か8に上げたらアメブロへの投稿ができなくなり、元に戻したという経緯があった。

そのIEでクライアントのサイトを見たら、いろいろとおかしい。
見なければよかったのだが、一度見てしまったら気になる。直したい。

そこで、おかしい点を、ネットを調べつつ修正。

透過のPNG画像が透過になっていない

まず１つ目がこれ。
透過のPNG画像が透過になっていない。
それを解決するのが以下のCSSの記述。

.sampleImageBox {  
width: 100px;  
height: 50px;  
}  
/* IE6以外向け */
html>body .sampleImageBox {  
background-image: url(画像URL);  
}  
/* IE6向け */
*html body .sampleImageBox {  
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='画像URL', sizingMethod='scale');  
} 

つまり、画像をベタ置きしてるとダメってことですね。

floatしたボックス(divなど）のmarginの値が倍になっている

つづいて、２つ目。
サイドバーとメインコンテンツのレイアウトが崩れていて何事と思ったら、floatした時に、そのボックスのmarginが2倍になるというなんともな仕様、というかバグなわけですな。

いくつか解決方法はあるようだが、今回はこのCSSの記述方法を採用。

margin: 0 0 0 50px;
_margin: 0 0 0 25px;  

これは、プロパティの前に特殊記号などが記述されていた場合でも読み飛ばして通常と同じように解釈してくれる（というか、解釈してしまう）IE6のバグを利用して、IE6には
半分のmarginを指定すると。

なんてことないテクニックではあるけど、IE6ハックに触れてちょっと成長したような気分。