0

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

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

每个 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 中进行测试时，它也会做同样的事情。

这是我的数学运算：220 像素 * 4 张图像 = 880 像素。25px = 75px 的 3 个边距（最后一个已删除）。75 + 880 = 955 像素。这应该在任何这些浏览器中给我一个 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;
}
4

3 回答 3

0

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

于 2012-04-08T19:25:36.423 回答
0

我不确定您为什么会看到您所描述的行为 - 您是否知道远程服务器上的所有 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

不会按您期望的方式工作。至少根据我的经验，last-child 规则在作为选择器的一部分应用于类时不起作用。它似乎只适用于直接向上的元素——比如#categories li:last-child。因此，它可能不会像您期望的那样删除右边距。

于 2012-04-10T01:47:41.597 回答
0

我看不出有什么问题。你应该使用制表符来做空格，而不是空格键。这里有 JSFiddle，在 FF、Chrome 和 Safari 中进行了测试。

http://jsfiddle.net/PwkAW/

于 2012-04-08T19:35:13.117 回答