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>