IE9＆Mac CSS bug？

Question

我在使用我的CSS和IE9以及MacOS上的Chrome浏览器时遇到了一个非常令人沮丧的问题。

我在一个容器中有四个图像ul #categories {width：960px}。

每个img（li）包含在一个框中.catBox {width：220px;向左飘浮; margin：20px 25px 10px 0px}。

我用.catBox拿走了最后一张图片上的右边距：last-child {margin-right：0px;}。

基本上，我试图做的是证明横跨960px宽度容器的四个图像。这使我的本地计算机上的Chrome，Safari，FF和IE9可以正常工作，Chrome，Safari和FF可以在我的Windows计算机上远程正常工作。

在IE中，当我远程测试时，它将最后一张图像推送到下一行。此外，在Mac上的Chrome中进行测试时，它也会执行相同的操作。

这是我的数学：220px * 4 images = 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

我没有看到任何问题。您应该使用制表符来执行空格键并且不使用空格键。在这里你有JSFiddle，在FF，Chrome和Safari中测试。

http://jsfiddle.net/PwkAW/

Answer 3

我不知道是什么原因，你看到的是你所描述的行为 - 你知道一个事实，你所有的CSS是完全远程服务器上的一样吗？如果我不得不猜测，还有另一个规则影响你的李。你能分享远程服务器链接吗？

此外，您的标记和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 

将无法​​按照您的预期工作。至少在我的经验中，最后一条子规则在作为选择器的一部分应用于类时不起作用。它似乎只适用于直线上的元素 - 比如#category li：最后一个孩子。所以，它可能不会像您期望的那样去除正确的边距。