display:inline-block 间隙

IE6/7是不支持display:inline-block属性，只是让其表现的跟inline-block一样，尤其对于inline水平的元素，其表现度可以用perfect一词来形容了。

对于IE8+以及现代浏览器，直接使用：{display:inline-block;}就可以了，支持任意水平的元素。

对于不支持的IE6/7浏览器该怎么办呢？

如果是inline水平的元素（如a标签，span标签之类）跟上面一样，直接：{display:inline-block;}就可以了，对于这两个浏览器，其功效与*zoom:1;是一样的。

如果是block水平的元素，例如li标签。则需要多点代码，目前我知道的方法有两个，如下所示：li {display:inline-block;*display:inline;*zoom:1}

display:inline-block布局的元素在chrome下会出现几像素的间隙，原因是因为我们在编辑器里写代码的时候，同级别的标签不写在同一行以保持代码的整齐可读性，即inline-block布局的元素在编辑器里不在同一行，即存在换行符，因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙，那是正常的，应该的。如果没有空格与间隙才是不正常的（IE6/7 block水平元素）。

为了避免出现间隙，提供以下几种解决办法，这几种方法灵活运用：

代码实例：

li{display:inline-block;}

<ul>

　　<li>

　　　　<span>...</span>

　　</li>

　　<li>

　　　　<span>...</span>

　　</li>

</ul>

1.给 li 写font-size:0

2.把li标签写到一行，不要在编辑器里敲回车换行，但是这种写法对于标签很多的情况可读性太差，适用与例如<a></a><a></a>这样简单的结构

3.把li的标签改成这样的写法

<li>
    <span>...</span>
</li><li>
    <span>...</span>
</li>
 
如果想深度了解display:inline-block   推荐阅读：http://www.zhangxinxu.com/wordpress/?p=1194