Ошибка IE9 и Mac CSS?

Question

Я испытываю очень неприятную проблему с моими CSS и IE9 и, возможно, даже с Chrome на MacOS.

У меня есть ul из четырех изображений в контейнере #categories {width: 960px}.

Каждый img (li) содержится в поле .catBox {width: 220px; плыть налево; margin: 20px 25px 10px 0px}.

Я забрал правое поле на последнем изображении с .catBox: last-child {margin-right: 0px;}.

В принципе, то, что я пытаюсь сделать, является оправданием четырех изображений в контейнере ширины 960 пикселей. Это отлично работает в Chrome, Safari, FF и IE9 на моем локальном компьютере, а Chrome, Safari и FF работают удаленно с моей Windows-машины.

В IE, когда я тестирую удаленно, он подталкивает последнее изображение к следующей строке. ТАКЖЕ, при тестировании в Chrome на Mac он делает то же самое.

Вот моя математика: 220px * 4 images = 880px. 3 поля (последний удаляется) при 25px = 75px. 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; 
} 

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 

Не будет работать так, как вы ожидаете. Правило последнего ребенка, по крайней мере, по моему опыту, не работает, когда применяется к классам как часть селектора. Кажется, что это работает только на прямолинейных элементах - например, #categories li: last-child. Таким образом, он не может удалить правильную маржу, как вы ожидаете.