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

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

IE CSS Bugs That’ll Get You Every Time

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

ボックスモデルのバグ

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

解決方法

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

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

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

解決方法

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

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

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

解決方法

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

Stepdownバグ

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

解決方法

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

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

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

解決方法

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

透過PNGを透過表示に対応

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

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

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

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

JavaScriptを使用した解決方法

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