跨浏览器的inlinie-block以及间隙的解决～

inline-block是个非常好的display值，使我们能同时对块级元素使用inline的属性和block的属性，来处理很多只单纯用一种很难解决或很多毛病的问题。比如居中、竖排、浮动等。是我个人非常喜欢的属性值之一～^_^ 首先我们知道ie8以及现代浏览器chrome firefox safari opera都很好地支持了inline-block,ie6、ie7虽然不支持inline-block但可以使用hasLayout的触发来伪实现： 代码如下：

english中文

english中文

但仔细发现，两个子元素之间会有一些空隙，这其实是换行符的原因，inline-block后浏览器对换行代码的换行的解释。 这里推荐一片文章：

拜拜了,浮动布局-基于display:inline-block的列表布局

介绍了解决的办法，其中一种最简单和有效，就是既然是换行负引起的问题，则去掉换行符就可以了，但缺点是会这样的代码不好管理。 第二种方法我推荐使用letter-spacing和word-spacing来解决而不推荐使用font-size是因为我喜欢用em单位，如果设置了font-size:0;后会极大地影响了之后的em使用： 使用浏览器hack来区别对待不同浏览器，定义letter-spacing和word-spacing值，代码如下：

english中文

english中文

测试通过：ie6|ie7|ie8|chrome 12.0|firefox 4|opera 11.11 近乎完美解决，缺憾是和chrome同属webkit的safari似乎得定义letter-spacing为-0.25em;但暂时没找到区分chrome和safari的csshack； YUI的写法相对来说更完美：

http://www.99css.com/archives/690

english中文

english中文