0

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

1 回答 1

0

您的问题有两个方面:

  1. 首先,您没有为该页面使用任何类型的 CSS 重置。这意味着您要对每个单独的浏览器进行大量猜测。那里有无数的 CSS 重置,它们都工作正常。我建议您从这三个中进行选择:Iain MacDonand 的 StrppdEric Meyer 的 ResetHTML5 Starter Pack中的 reset,它基本上是一个扩展的 HTML5 版本的 Strppd
  2. 其次,是的,在计算非整数值时,IE 有点厚,这就是为什么我建议使用非常有用的 box-sizing 技术,如Paul Irish短文中所述
于 2013-04-07T11:06:54.717 回答