我经常为这样的网上商店制作目录
<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/
我想知道是否有更有效的解决方案。