跨浏览器的inlinie-block以及间隙的解决～-优快云博客

本文深入探讨inline-block布局的特点及应用，包括如何利用它解决布局难题，如居中、竖排、浮动等问题，并提供了避免换行符引起的间隙的解决办法，以及不同浏览器下兼容性的实现策略。

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

english中文

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

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

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

english中文