我在使用我的CSS和IE9以及MacOS上的Chrome浏览器时遇到了一个非常令人沮丧的问题。IE9&Mac CSS bug?
我在一个容器中有四个图像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;
}
IE9不能在Mac OS X上运行。您是否真的在Mac硬件上的IE9/Win上遇到问题,而您不在非Apple硬件上? – BoltClock 2012-04-08 19:25:13