问答详情
源自:6-1 line-height的实际应用

在低版本浏览器下,比如ie6,如果对inline-block元素设置了width或height属性,是不是会变为块级别元素?

在低版本浏览器下,比如ie6,如果对inline-block元素设置了width或height属性,是不是会变为块级别元素?

提问者:jindong 2018-06-20 00:40

个回答

  • 偷懒的小懒猪
    2018-06-26 17:32:02
    已采纳

    ie7及更低版本的ie浏览器不支持display:inline-block这个属性! 
    正确的解释是”使用inline-block属性在IE下会触发layout,因此元素上设置的width、height是能生效的,所以也就有了同其它浏览器一致的显示效果”,而不能说IE6/7支持 display:inline-block!

    在IE下,display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上,只能保证这个div拥有块元素的特征(可以设置宽度,高度等),但还是会产生换行。接下来要设置display: inline,使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上,inline-block属性是不会触发元素的layout的,因此我们还要额外加上 *zoom:1来触发layout!

    IE7下块元素如何兼容 display:inline-block写法

    方法1:直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1等)。兼容各浏览器的代码如下: div {display:inline-block;*display:inline; *zoom:1;…}

    解释:dispaly:inline-block照顾的是ie8+的浏览器,这是正常的设置,在低版本的ie下设置行内块有2个条件,一个是行内,一个是设置宽高,触发layout即可设置宽高,而div设置了宽高后还是会换行,layout不是为水平而设置的,所以为块级元素转行内块加上了*display:inline属性,但是display:inline不会触发layout,于是加上zoom:1重新触发layout,于是就形成了一个可以“设置宽高的行内元素”

    方法2:先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象(两个display 要先后放在两个 CSS 样式声明中才有效果,这是 IE 的一个经典bug ,如果先定义了 display:inline-block,然后再将 display 设回 inline 或 block,layout不会消失)。代码如下(…为省略的其他属性内容): div {display:inline-block;…}div{*display:inline;}