IE9 & bug？

Question

我在一个容器中有一个包含四张图片的ul #categories {width: 960px}。

每个img (li)包含在一个方框.catBox {宽度: 220px；浮动:左侧；边距: 20px 25px 10px 0px}中。

这在我的本地电脑上的Chrome，Safari，FF和IE9中呈现良好，并且Chrome，Safari和FF在我的Windows机远程工作也很好。

在IE中，当我远程测试时，它会将最后一个图像推到下一行。此外，当在Mac上使用Chrome进行测试时，它也会做同样的事情。

这是我的数学公式: 220px *4图像= 880px。3页边距(去掉最后一个)为25px = 75px。75 + 880 = 955px。在这些浏览器中，这应该会给我一个5px的“缓冲区”。有人能帮帮忙吗？我是不是想错了？

提前感谢您的帮助。

HTML

<div id="categories">
<ul>
<li class="catBox"><img src="img/3mmwpolytongue22mm.jpg" alt=""><div class="caption"><h2>Stone</h2></div> 
</li>
<li class="catBox"><img src="img/4g5.5m12ws.JPG" alt=""><div class="caption"><h2>Wood</h2></div></li>
<li class="catBox"><img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt=""><div class="caption"><h2>Teflon & Polymer</h2></div></li>
<li class="catBox"><img src="img/13mmblueindianearrings1.jpg" alt=""><div class="caption"><h2>Custom</h2></div></li>
</ul>
</div>

CSS

#categories {
    width: 960px;
    height: 240px;
}

.catBox {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

.catBox:last-child {
    margin-right: 0px;
}

.caption {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
}

.caption h2 {
    color: #fff;
}

Answer 1

删除标签之间的所有空格。它可能会干扰像素精确的布局。

Answer 2

我看不出有什么问题。您应该使用tab来处理空格，而不是空格键。这里你有JSFiddle，在FF，Chrome和Safari中测试过。

http://jsfiddle.net/PwkAW/

Answer 3

我不太确定为什么您会看到您所描述的行为-您是否知道所有CSS在远程服务器上都是完全相同的？如果非要我猜的话，还有一条规则正在影响你的li，你能分享远程服务器链接吗？

此外，您的标记和CSS也可以大大简化。我并不是说它可以修复你所看到的东西，但它至少会消除一些情况下的变量。你可以：

<ul id="categories">
  <li>
     <img src="img/3mmwpolytongue22mm.jpg" alt="" />
      <h2>Stone</h2> 
  </li>
  <li>
      <img src="img/4g5.5m12ws.JPG" alt="" />
      <h2>Wood</h2>
  </li>
  <li>
      <img src="img/5mmsnowflakeobsidianlabretA_01.JPG" alt="" />
      <h2>Teflon & Polymer</h2>
  </li>
  <li>
      <img src="img/13mmblueindianearrings1.jpg" alt="">
      <h2>Custom</h2>
  </li>
 </ul>

那么你的CSS可能是这样的：

#categories {
width: 960px;
height: 240px;
}

#categories li {
    position: relative;
    display: inline;
    overflow: hidden;
    width: 220px;
    margin: 20px 25px 10px 0px;
    float: left;
    z-index: -999;
}

#categories li:last-child {
    margin-right: 0px;
}

#categories h2 {
    position: absolute;
    top: 190px;
    width: 220px;
    height: 30px;
    background-color: #333;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    -ms-opacity: .5;
    text-align: center;
    z-index: 999;
    padding: 0px;
    color: #fff;
}

实际上，在重构CSS时，我确实注意到了一个问题--这条规则：

catBox:last-child

不会像你期望的那样工作。至少在我的经验中，最后一个孩子的规则在作为选择器的一部分应用于类时不起作用。它似乎只适用于直接向上的元素-比如#类别li:最后一个孩子。因此，它可能不会像您预期的那样删除正确的边距。