0611
IE6でfloatしたものにmarginを設定すると値が2倍になる
InternetExplorler 6でfloatと同時にmarginを設定すると、marginの値の2倍が適用されてしまう。
<div class="wrapper"> <div class="obeject-left"> <p>Left Object</p> </div> <div class="obeject-right"> <p>Right Object</p> </div> </div>
.wrapper {
width: 300px;
background : #efefef;
}
.obeject-left {
float: left;
width: 100px;
margin: 10px; /* この値の2倍の表示になっちゃう */
background : #ccc;
}
.obeject-right {
float: right;
width: 100px;
margin: 10px; /* この値の2倍の表示になっちゃう */
background : #ccc;
}
Left Object
Right Object
これを回避するには、floatの前にdisplay:inline;を書いてあげると値どおりのmarginに。
.wrapper {
width: 300px;
background : #efefef;
}
.obeject-left {
display: inline;
float: left;
width: 100px;
margin: 10px; /* この値どおりに表示 */
background : #ccc;
}
.obeject-right {
display: inline;
float: right;
width: 100px;
margin: 10px; /* この値どおりに表示 */
background : #ccc;
}
Left Object
Right Object
AmazonでCSSを探す
