用display:inline-block做产品列表
浏览器越来越多 《网站重构》说web标准能结束这种做兼容的日子，看来路程还很长。
下面这篇文章中提到的几篇链接，都非常不错，值得仔细学习。
由于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）