html - Safari与Firefox:奇怪的UL“填充”

我有这个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时，如下所示：

最佳答案

我假设问题是您使用的是负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>

关于html - Safari与Firefox:奇怪的UL“填充”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14369073/