HTML
<div class="outer height199"> <p>This container has a height of 199px and width of 199px</p> <div class="inner">img</div> <div class="inner2">img</div> </div> <div class="outer height200"> <p>This container has a height of 200px and width of 200px</p> <div class="inner">img</div> <div class="inner2">img</div> </div>
CSS
.outer{
width:200px;
background:red;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.height199{height:199px;width:199px;}
.height200{height:200px;width:200px}
.height201{height:201px;width:201px;}
.height202{height:202px;width:202px;}
.height203{height:203px;width:203px;}
.height204{height:204px;width:204px;}
.height205{height:205px;width:205px}
.inner,.inner2{
width:30px;
height:30px;
position:absolute;
background:blue;
}
.inner{
bottom:0;
left:0;
}
.inner2{
top:0;
right:0;
}
p{clear:both;margin:0 40px 1em 5px}
可以看出在奇数容器下出现了1px 间距,而在偶数容器下正常。
不完美的解决方法:改变结构并使用浮动
HTML
<div class="fix"> <div class="outer height199"> <div class="inner2">img</div> <p>This container has a height of 199px</p> </div> <div class="inner">img</div> </div> <div class="fix"> <div class="outer height200"> <div class="inner2">img</div> <p>This container has a height of 200px</p> </div> <div class="inner">img</div> </div>CSS
.fix {
width:200px;
margin:10px;
position:relative;
float:left;
display:inline;/* ie double margin fix*/
}
.fix .outer{margin:0}
.fix .inner{
clear:both;
margin-top:-30px;
position:relative;
float:left;
}
.fix .inner2{float:right;position:static}

