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