Safari瀏覽器VS Firefox的：奇怪的UL 「填充」

Question

我有這樣的HTML：

<article class="images"> 
    <ul class="cf"> 
    <li> 
     <a href="#"> 
     <img src="http://www.placehold.it/800x600" alt="" /> 
     </a> 
    </li> 
    </ul> 
</article> 

而這個CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

.images ul { 
    margin-left: -3%; 
    width: 100%; 
    background: red; 
} 
.images li { 
    list-style-type: none; 
} 
.images li img { 
    width: 17%; 
    margin-left: 3%; 
    margin-bottom: 3%; 
    float: left; 
} 

儘管如此，在Safari中ul似乎有某種填充上對。
在Firefox中，ul顯示正確。

看到它自己：http://jsfiddle.net/EdCXx/

有沒有辦法解決呢？

編輯：隨着OS X 10.8.2的Safari 6.0.2，它看起來像這樣：

Answer 1

我假設的問題是，你正在使用負margin，這是造成問題（我目前無法訪問Mac，所以無法驗證）。

嘗試將您的CSS更改爲以下內容。我還將您的clearfix更改爲我之前選擇的具有出色的跨瀏覽器結果的一個。

http://jsfiddle.net/EdCXx/4/

CSS：

/* Reset */ 
* { 
    margin: 0; 
    padding: 0; 
} 

/* Clearfix */ 
.clear:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    line-height: 0; 
    visibility: hidden; 
} 

/* Images */ 
.images ul { 
    width: 100%; 
    background: red; 
} 
.images li { 
    list-style: none; 
    overflow: hidden; 
    margin-right: 3%; 
    margin-bottom: 3%; 
    float: left; 
    width: 17%; 
    height: 17%; 
} 
.images li img { 
    float: left; 
    max-width: 100%; 
    max-height: 100%; 
} 

，並擰緊你的HTML（不是必須的，但它的漂亮）：

<article class="images"> 
    <ul class="clear"> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li><a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
     <li> <a href="#"><img src="http://www.placehold.it/800x600" alt="" /></a></li> 
    </ul> 
</article>