display:inline-block;在各浏览器下的问题和终极兼容办法

display:inline-block;在各浏览器下的问题和终极兼容办法

一、IE 5.5、6、7 、8（Q）中display: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 元素 display:inline-block； 后均会产生水平空隙

其中IE 6、7、8(Q)的情况比较特殊

• block元素display:inline-block;

  

• inline元素display:inline-block;

  

解决方案：使用font-size:0;消除空隙

• Safari 5.1.7 由于不支持 font-size:0 ，仍然存在空隙，需要使用负letter-spacing来消除Safari下的空隙。

• 使用font-size:0;后，IE6、7 中始终存在的 1px 空隙，需要添加word-spacing:-1px;来解决。

三、终极的兼容所有浏览器的可复用性代码

.dib-wrap {
    font-size:0;/* 所有浏览器 */
    *word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
    font-size: 12px;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align:top;
    display: inline-block;
    *display: inline;
    *zoom:1;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
    .dib-wrap{
        letter-spacing:-4px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
    }
}

使用display:inline-block代替float的好处

可以通过 vertical:middle; 和 text-align:center; 轻易地实现元素的垂直居中和水平居中。

笔者注：此文并不是我的原创，只是笔者通过淘宝UED和其他的一些相关文章作的检验和总结。

参考资料：

• http://www.w3cplus.com/css/inline-blocks.html BY 99(译)
• http://ued.taobao.com/blog/2012/08/inline-block/ BY 一丝。