inline-block显示

最新推荐文章于 2024-03-31 16:06:48 发布

PaigeWw

最新推荐文章于 2024-03-31 16:06:48 发布

阅读量321

点赞数 1

分类专栏：兼容性问题

本文链接：https://blog.csdn.net/u013899738/article/details/56494714

版权

兼容性问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考：http://blog.csdn.net/zxleezx/article/details/7362846

问题：display:inline-block;在ie6、ie7下只有设置在默认显示方式为inline的元素上才会生效

在IE8以前，IE浏览器渲染内核有个hasLayout属性（也就是）来计算元素的大小尺寸，

当hasLayout的值为true时，IE就会计算并渲染元素自己（和它可能的子孙元素）的大小尺寸，值为flase时IE就会依赖其父元素计算尺寸。

hasLayout的设计初衷是用于辅助块级元素的盒模型解析的，它是用于块级元素的。如果用于行内元素，会引发一些特殊的效果，就会让行内元素拥有一些块级元素的特性。

而这个BUG就是你写了display:inline-block之后，hasLayout的值虽然为true但是IE6和7不识别了。

但是hasLayout的属性被激活后（只读属性，一旦触发就不可逆转），它可能的子代元素display:inline就可以渲染大小尺寸了。

方案：

    div{
        display:inline-block;/*正常的浏览器识别正确，同时触发IE6和7的hasLayout属性，使行内元素拥有块级元素的特性*/
        *display:inline; /*为坑爹的IE浏览器设置私有属性，同时由于触发了hasLayout属性，因此可以设置宽高了*/
        *zoom:1; /*为某些IE版本不识别inlineblock时先设置inline再触发一次hasLayout属性*/
    }