Question

我遇到了一个非常令人沮丧的问题，我的CSS和IE9甚至可能是MacOS上的Chrome。

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

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

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

基本上，我要做的是证明960px宽度容器上的四个图像是合理的。这可以在我的本地计算机上的Chrome，Safari，FF和IE9中很好地呈现，Chrome，Safari和FF可以在我的Windows机器上远程工作。

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

这是我的数学：220px * 4张图片= 880px。在25px = 75px时有3个边距（最后一个被移除）。 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在远程服务器上是完全相同的吗？如果我不得不猜测，还有另一条规则正在影响你的李。你可以共享远程服务器链接吗？

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

不会按照您的预期工作。至少在我的经验中，最后一个子规则在作为选择器的一部分应用于类时不起作用。它似乎只适用于直接元素 - 比如#categories li：last-child。因此，它可能无法按预期删除正确的保证金。

IE9＆amp; Mac CSS错误？

3 个答案: