我遇到了一个非常令人沮丧的问题,我的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;
}
答案 0 :(得分:0)
删除标记之间的所有空格。它可能会干扰像素精确的布局。
答案 1 :(得分:0)
我没有看到任何问题。您应该使用tab来执行空格而不使用空格键。这里有JSFiddle,在FF,Chrome和Safari中测试过。
答案 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。因此,它可能无法按预期删除正确的保证金。