• このエントリーをはてなブックマークに追加

IE6の中でももっとも有名で鬱陶しいバグの一つ。floatをしている要素にマージンを指定すると幅が2倍になってしまう。そのため、設計通りに横に並べようとしたときにうまくいかなくなる。

XHTML/HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>さんぷる</title>
</head>

<body> <div id=”container”> <div class=”left”> 左ブロック </div> <div class=”right”> 右ブロック </div><br class=”clear” /> </div> </body> </html>

CSS

body{
background:#990;
}
#container{
width:440px;
background:#cc0;
}
.left{
float:left;
width:200px;
margin:10px;
background:#ffc;
}
.right{
float:right;
width:200px;
margin:10px;
background:#ffc;
}
.clear{
clear:both;
}

2倍になってしまうのはfloatのかかっている要素なので、floatしているleftとrightの中にブロックを入れるなどして対策すればいい。

XHTML/HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>さんぷる</title>
</head>
<body>
<div id="container">
<div class="left">
<div class="inner"> 左ブロック </div>
</div>
<div class="right">
<div class="inner"> 右ブロック </div>
</div><br class="clear" />
</div>
</body>
</html>

CSS

body{
background:#990;
}
#container{
width:440px;
background:#cc0;
}
.left{
float:left;
width:220px;
}
.right{
float:right;
width:220px;
}
.inner{
margin:10px;
background:#ffc;
}
.clear{
clear:both;
}