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>