[CSS]IE6でよく遭遇する6つのバグとその解決方法

CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。

IE CSS Bugs That’ll Get You Every Time

• ボックスモデルのバグ
• マージンが二倍になってしまうバグ
• min-width, min-heihgtと同等の指定
• Stepdownバグ
• hover擬似クラスをa要素以外にも対応
• 透過PNGを透過表示に対応

ボックスモデルのバグ

div#box{
	width:100px;
	border:2px solid black;
	padding:10px;
}

上記の指定をした場合、IE6ではborderで囲まれた領域が「100px」となり、最新のブラウザでは「124px」となります。

解決方法

paddingを使用する場合には、ボックスに使用しないで、内包する要素に指定を行います。

マージンが二倍になってしまうバグ

div#box{
	float:right;
	margin-right:20px;
}

上記の指定をした場合、IE6ではマージンが「40px」となり、最新のブラウザでは「20px」となります。

解決方法

「display:inline;」を付け加えるか、空白の指定に「margin」ではなく「padding」を使用します。

min-width, min-heihgtと同等の指定

IE6では、「min-width」「min-height」の指定は有効になりません。

解決方法

CSS Hackを使用して、指定します。

selector{
	min-height:500px;
	height:auto !important;
	height:500px;
}

Stepdownバグ

通常、フロートした要素は横並びになりますが、IE6で階段状になるバグがあります。

ul#menu li a{
	display:block;
	width:130px;
	text-align:center;
	font-weight:bold;
	float:left;
	color:white;
	font-size:1.2em;
	text-decoration:none;
	background:#600;
}

解決方法

「display:inline;」指定を行います。

hover擬似クラスをa要素以外にも対応

IE6ではhover擬似クラスはa要素にしか対応していません。最新のブラウザではa要素以外にも対応しています。

解決方法

Whatever:hoverの「csshover.htc」を使用すると、他の要素にもhover疑似クラスを利用することができます。

body{behavior:url("csshover.htc");}

透過PNGを透過表示に対応

IE6では、透過PNG画像が、透過しないで表示されてしまいます。

解決方法は、The Different Techniques for Applying the PNG Hackでいくつか紹介されていますが、そのうち2つを紹介します。

HTCファイルを使用した解決方法

IE PNG Fix v1.0 RC4の「iepngfix.htc」を使用すると、IE6で透過PNGが利用できます。

img{behavior:url(iepngfix.htc)}

JavaScriptを使用した解決方法

PNGHackの「pnghack.js」を使用すると、IE6で透過PNGが利用できます。
pnghack.jsの使用方法