2

我有这个 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，它看起来像这样：
在此处输入图像描述

4

1 回答 1

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>
于 2013-01-16T22:57:25.647 回答