html - Safari 与 Firefox : Strange UL "padding"

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>