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 X10.8.2上のSafari6.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 に答える