一、兼容性：

1. IE6、IE7不识别inline-block但可以触发块元素，其它主流浏览器均支持inline-block。

注：在行内元素上使用display:inline-block,IE6、7与其他浏览器效果一致

原因分析：使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果

2. 解决IE6、IE7兼容性的方法：

2.1 首先设置inline-block触发块元素，具有了layout的特性，然后设置display:inline使块元素呈现行内元素，此时layout的特性不会消失。(两个display 要先后放在两个 CSS 样式声明中才有效果.)

div { display:inline-block; }div { *display:inline; }

2.2 直接设置display:inline，使用zoom:1触发layout。

兼容所有浏览器的方法是：

div{ display:inline-block;*display:inline;*zoom:1; }

二、间隙

1. 产生间隙的例子：

行内元素（如a）、块元素(如div)设置display:inline-block后，以及真正意义上的inline-block水平呈现的元素（如input），在换行显示或空格分隔了的情况在水平显示上会有间距产生

2. 去除间隙的方法

2.1 移除空格(代码可读性变差)

    <div>    <a href="">    这是一</a><a href="">    这是二</a><a href="">    这是三</a></div>

注：a 标签为display:inline-block的情况下

2.2 使用margin负值（margin负值的大小与上下文的字体和文字大小相关，请参考“基于display:inline-block的列表布局”）

a{    display: inline-block；       margin-right:-3px;}

2.3 使用font-size:0

div {    font-size: 0;    -webkit-text-size-adjust:none;  /*去除谷歌最小字体的限制，新版谷歌中已经失效*/}div a {    font-size: 12px;}

2.4 使用letter-spacing

div {    letter-spacing: -3px;}div a {    letter-spacing: 0;}    

注：Opera浏览器下有个蛋疼的问题：最小间距1像素，然后，letter-spacing再小就还原了

2.5 使用word-spacing

div {    word-spacing: -6px;}div a {    word-spacing: 0;}

3. 其他成品方法

下面展示的是YUI 3 CSS Grids 使用letter-spacing和word-spacing去除格栅单元见间隔方法（注意，其针对的是block水平的元素，因此对IE8-浏览器做了hack处理）：

.yui3-g {    letter-spacing: -0.31em; /* webkit */    *letter-spacing: normal; /* IE < 8 重置 */    word-spacing: -0.43em; /* IE < 8 && gecko */}.yui3-u {    display: inline-block;    zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */    letter-spacing: normal;    word-spacing: normal;    vertical-align: top;}

以下是一个名叫RayM的人提供的方法：

li {    display:inline-block;    background: orange;    padding:10px;    word-spacing:0;    }ul {    width:100%;    display:table;  /* 调教webkit*/    word-spacing:-1em;}.nav li { *display:inline;}    

参考文章：张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]