IE6でよく遭遇するCSSのバグとその解決方法
Post on:2008年1月21日
sponsors
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。
IE6 - CSS Bugs and Fixes Explained
IE6で、マージンが２倍になってしまうバグ
IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。
下記のコードで、IE6はマージンが20pxになります。
sample:バグ
#navigation{
float: left;
width: 200px;
margin-left: 10px;
}
#content{
float: right;
width: 500px;
margin-right: 10px;
}
マージンが２倍になってしまうバグは、「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:解決方法：その１
#corner{
width: 10px;
height: 2px;
background-color: #C00;
font-size: 0;
}
もしくは、「overflow: hidden;」で解決することもできます。
sample:解決方法：その２
#corner{
width: 10px;
height: 2px;
background-color: #C00;
overflow: hidden;
}
sponsors
