inline-block兼容及间隙问题

一、兼容性：

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]