-2

普段はこんな感じでネットショップのカタログを作っています

<div class="catalogue">
<ul>
    <li>
        <a href="#"></a>
    </li>
    <li>
        <a href="#"></a>
    </li>
    ...
</ul>
</div><!-- .catalogue -->


.catalogue {
    overflow: hidden;
    margin: 0 -3px;
}
.catalogue ul {
    margin: -18px 0 40px -16px;
    word-spacing: -1em;
    font-size: 0;
    line-height: 0;
    letter-spacing: -1px;
}
.catalogue li {
    display: inline-block;
    width: 226px;
    margin: 22px 0 0 16px;
    font: normal 15px/20px Arial, Helvetica, sans-serif;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

ブラウザーで 3 ピクセルのパディングを削除するには、これらすべての「-spacing」などが必要です。

Windows 上の Safari 5.1.7 の場合、この行を追加する必要があります

@media screen and (-webkit-min-device-pixel-ratio:0) {.catalogue ul {display: table; /* Safari only */}}

ここで実際の例を見ることができますhttp://jsfiddle.net/N4gKg/7/

もっと効果的な解決策があるのではないかと思います。

4

1 に答える 1

0

この投稿を見てください。これはあなたに役立ちます http://css-tricks.com/seamless-responsive-photo-grid/

于 2013-07-30T10:17:12.353 に答える