我创建了一个浮动图像网格,其中图像设置为 100%,并且它们之间有 1px 的边框。这个问题似乎只发生在 IE9 中……如果你慢慢调整浏览器的大小,你会到达水平边框消失的地步。这是测试:http: //zerostatic.com/float_grid/
CSS:
*{
margin: 0;
padding: 0;
border: 0;
}
ul{
width:100%;
}
li{
list-style:none;
float:left;
width:33.333333333%;
}
.li-inner{
border:1px solid red;
margin-left: -1px;
margin-top: -1px;
}
img{
width:100%;
}
HTML:
<ul>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
<li>
<div class="li-inner">
<a href="#" class="full-image"><img src="http://www.zerostatic.com/01.jpg" alt=""></a>
</div>
</li>
</ul>