IE9& Mac CSS错误?

时间:2012-04-08 19:23:13

标签: html css image internet-explorer css3

我遇到了一个非常令人沮丧的问题,我的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;
}

3 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我没有看到任何问题。您应该使用tab来执行空格而不使用空格键。这里有JSFiddle,在FF,Chrome和Safari中测试过。

http://jsfiddle.net/PwkAW/

答案 2 :(得分:0)

我不确定你为什么会看到你所描述的行为 - 你知道你的所有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。因此,它可能无法按预期删除正确的保证金。