IE9＆Mac CSS bug？

Question

我在使用我的CSS和IE9以及MacOS上的Chrome瀏覽器時遇到了一個非常令人沮喪的問題。

我在一個容器中有四個圖像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; 
} 

Answer 1

刪除標籤之間的所有空格。它可能會干擾像素精確的佈局。

Answer 2

我沒有看到任何問題。您應該使用製表符來執行空格鍵並且不使用空格鍵。在這裏你有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 

將無法​​按照您的預期工作。至少在我的經驗中，最後一條子規則在作爲選擇器的一部分應用於類時不起作用。它似乎只適用於直線上的元素 - 比如#category li：最後一個孩子。所以，它可能不會像您期望的那樣去除正確的邊距。