用display:inline-block做产品列表

由于D2的关系看到这篇文章《[纯技]产品列表到底应该怎么做?》,评论发不成功,又恰逢最近频繁遇到类似的项目,总结如下:

传统的实现方式是用float来实现,换一种思路用display:inline-block,比如这篇《Cross-Browser Inline-Block》(中文翻译)。在Firefox/Safari/Chrome/IE8中会遇到《说说display:inline-block》提到的第一个空隙问题,不过现在已经有了解决方法(详见《Firefox Bug: inline/inline-block的间隙》的评论并略作改进):

ul{letter-spacing:-.25em}  
li{letter-spacing:normal;}  

同时我也尝试了《Layout of repeating blocks》提到的word-spacing,不过仅Firefox/IE8有效,而在Chrome/Safari中无效

另外要注意的是-.25em是字体设置为Arial时的情况,为其他字体时会有些不同,下面仅列出了常用的几个

常用字体与letter-spacing的关系
宋体/Verdana-.5em
Arial-.25em
Tahoma-.333em

于是display:inline-block加上vertical-align就OK鸟

ul{letter-spacing:-.25em}  
li{display:inline-block;#display:inline;#zoom:1;letter-spacing:normal;vertical-align:top;}  

如果li中只有img,vertical-align:middle可以实现未知高度图片列表垂直居中,比如Picasa图片列表的效果(单个图片垂直居中请看怿飞的《图片垂直居中的使用技巧,不过个人认为这个通常只会出现在面试题中:P

——- 2013-4-26 更新 ——-
因最新版的 Chrome 已经支持 font-size:0,故可以用 font-size:0 来去除间距