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

Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する3つのCSSのバグとその解決方法の意訳です。

IE6 - CSS Bugs and Fixes Explained

IE6で、マージンが2倍になってしまうバグ

IE6で、フロートした要素のマージンが2倍になってしまうバグと解決方法の紹介です。

下記のコードで、IE6はマージンが20pxになります。

sample:バグ

#navigation{
 float: left;
 width: 200px;
 margin-left: 10px;
}
#content{
 float: right;
 width: 500px;
 margin-right: 10px;
}

マージンが2倍になってしまうバグは、「display:inline;」で解決します。

sample:解決方法

#navigation{
 float: left;
 width: 200px;
 margin-left: 10px;
 display: inline;
}
#content{
 float: right;
 width: 500px;
 margin-right: 10px;
 display: inline;
}

IE6で、hasLayoutプロパティによって起こるバグ

IE6には、hasLayoutプロパティの仕様によりいくつかのバグが生じます。
※hasLayoutに関しては下記のエントリーを参照ください。
IEでのCSSのバグを回避するhasLayout

下記のコードで、IE6は背景色#CCCを表示しません。

sample:バグ

#container{
 background-color: #CCC;
 overflow: hidden;
}
#navigation{
 float: left;
 width: 200px;
 margin-left: 10px;
 display: inline;
}
#content{
 float: right;
 width: 500px;
 margin-right: 10px;
 display: inline;
}

hasLayoutのバグは、「height:1%;」で解決します。

sample:解決方法

#container{
 background-color: #CCC;
 overflow: hidden;
}
* html #container{
 height: 1%;
}

#navigation{
 float: left;
 width: 200px;
 margin-left: 10px;
 display: inline;
}
#content{
 float: right;
 width: 500px;
 margin-right: 10px;
 display: inline;
}

IE6で、小さい高さを指定した場合に起こるバグ

IE6で、1pxや2pxなど小さい高さを指定した際、そのサイズより大きくなってしまうバグがあります。

下記のコードで、IE6は高さ2pxではありません。

sample:バグ

#corner{
 width: 10px;
 height: 2px;
 background-color: #C00;
}

小さい高さを指定した場合に起こるバグは、「font-size:0;」で解決します。

sample:解決方法:その1

#corner{
 width: 10px;
 height: 2px;
 background-color: #C00;
 font-size: 0;
}

もしくは、「overflow: hidden;」で解決することもできます。

sample:解決方法:その2

#corner{
 width: 10px;
 height: 2px;
 background-color: #C00;
 overflow: hidden;
}

top of page

©2017 coliss