display:inline-block 使用说明

一,内联元素下,使用inline-block,ie各版本都支持。(已测试)
二,块级元素下,使用inline-block,ie8 及其以上支持。
需要支持ie6及其以上

解决方案:zoom:1;display:inline-block;*display:inline;(已测试ie6,7,8,9)
注意顺序,有些blog说display:inline-block;与*display:inline;就行,但是经过测试display:inline-block;不足以在ie6,7下触发haslayout,是错误的,所以需要加zoom来出发。
以下有ff2的兼容方案



以下是网上说的
========================================================
display:inline-block; /*Firefox3 beta、IE8 beta、Opera、Safari 支持,IE 下触发 inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,也可以用 -moz-inline-box */

zoom:1; /*IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
http://www.planabc.net/2008/04/08/cross_browser_support_for_inline-block_styling/
========================================================

你可能感兴趣的:(web前端)