-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;
}

我需要所有这些“-spacing”等来删除浏览器中的 3 px 填充。

对于 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 回答