重新认识inline-block

一、IE6\7其实是支持inline-block的

IE5.5 后开始支持 inline-block， 但是它所支持的 inline-block 不能等同于 CSS2.1 中的 inline-block，因为 IE5.5 比 CSS2.1 更早提出 inline-block 的概念并作为所谓的「私有属性值」使用，所以二者表现出来的效果是不完全一致。

IE 5.5、6、7 、8（Q）中 block 元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发 hasLayout。

IE 5.5、6、7 、8（Q）中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。

 

二、inline-block元素直接由于空白字符、换行符会产生间隔

使用 font-size:0经测试发现，chrome、firefox、IE8+、opera，inline 或 block 元素都没有空隙了；IE6、7 中始终存在的 1px 空隙；Safari 5.1.7 由于不支持 font-size:0 ，仍然存在空隙。

处理 Safari 不支持 font-size:0 的问题可以通过设置letter-spacing 为负值来实现，那么这个负值到底取多少合适呢？经过测试得出的结论是：inline-block 产生的空隙与父级元素继承或者设定的 font-family、font-size 有关，通常情况下，12px 大小的 tahoma 字体，inline-block 后元素间产生的空隙（间隙）大约是 5px；各个字体详细情况请参阅《inline-block空隙–letter-spacing与字体大小/字体关系数据表》 。

修复 IE6、7 中始终存在的 1px 空隙：word-spacing设置为word-spacing:-1px。

 

详细参考资料： 《inline-block 前世今生》