Question

我创建了一个浮动图像网格，其中图像设置为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>

Answer 1

你的问题有两个方面：

首先，您没有对该页面使用任何类型的CSS重置。这意味着你要对每个浏览器进行大量的猜测。那里有无数的CSS重置，它们都运行良好。我建议您从这三个中选择：Iain MacDonand's Strppd，Eric Meyer's Reset或HTML5 Starter Pack内的重置，这基本上是Strppd的广泛HTML5版本
其次，是的，在计算非整数值时，IE有点厚，这就是为什么我建议采用非常有用的盒子大小调整技术，详见这篇简短Paul Irish post

具有1px边框的浮动网格 - 在某些浏览器宽度的IE9中，水平边框消失

1 个答案: