【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨

jianqi 2019-06-20

初始问题描述

最近在学习CSS的display属性时,遇到一个在IE6/7下html块级元素设置inline-block属性的兼容性问题,于是就查资料,网上很多关于这个问题的解答,大致的描述如下:[1]

  1. IE6、IE7支持对html行内元素设置inline-block。实际上只是看起来支持而已,IE6、IE7并不识别inline-block这个属性值,只是触发了layout,让行内元素有了inline-block的表征,比如说:行内显示且可设置宽高等等。

  2. 而对html块级元素设置inline-block,也只是触发了layout,对块级元素设置行内块级属性的目的没有达到。

那么在IE6、IE7下,怎么实现块级元素的inline-block属性值设置呢?
常见有2种方法:

  1. 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为行内对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失),代码如下:

    div {display:inline-block;}
    div {display:inline;}

  2. 直接让块元素设置为行内对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等),代码如下:

    div { display:inline-block; _zoom:1;_display:inline;}/*推荐IE6*/
    div { display:inline-block; *zoom:1;*display:inline;}/*推荐IE6或IE7*/

可是,总觉得有些地方不明白。

动手试试

我们用IETester来测试一下,IE6/IE7/IE9三个版本浏览器对行内和块级元素实际的显示情况。

首先,给出HTML部分代码,这里的one和four对应的元素只是作为参照物,中间两个才是实际操作的元素:

<span id="one">one</span>
<span id="two">two</span>
<div id="three">three</div>
<span id="four">four</span>

css部分代码如下:

#one { background-color: orangered; }
#two {
    background-color: lime;
    height: 2em;
}
#three {
    background-color: black;
    color: white;
    height: 3em;
}
#four { background-color: skyblue; }

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
很明显,这里三者没啥区别。

然后,就是修改了。

第一步,对行内元素two设置display:inline-block;声明

#two {
    background-color: lime;
    height: 2em;
    display: inline-block;
}

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:我们发现虽然IE6/IE7的行内元素设置inline-block后显示的结果表明有块级元素显示宽高的“能力”,但是跟IE9上显示的有区别呢,我又在在chrome上试了一下,跟IE9的一样。IE9和chrome对inline-block是完全支持的,这说明什么?说明可能IE6/IE7并不是像IE9和chrome那样实现inline-block设置的。

第二步,对块级元素three设置display:inline-block;声明

#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
}

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:我们很明显可以看出IE6/IE7不支持块级元素设置inline-block。

第三步,对上述的块级元素再添加*display:inline;声明

#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
    *display: inline;
}

IE6/IE7/IE9对应的显示情况:【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:这次是块级元素three获得了inline的属性值,可是IE6/IE7下block属性“丢了”。也就是设置inline-block失败,*display:inline;没起作用。

第四步,将上述后添加的*display:inline;放于一个独立的CSS规则中

#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
}
#three { *display: inline; }

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:总算把块级元素设置成inline-block了,但是为何IE6/IE7跟IE9的显示结果还是不一样呢?是不是跟第一步中行内元素设置inline-block的情况很像呢?

第五步,换个方法,给第三步的块级元素再添加_zoom:1;声明

#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
    _zoom:1;
    *display: inline;
}

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:这次IE7直接不显示出块级的效果了。为何IE6就可以,哪里出问题了?

第六步,给第三步的块级元素再添加*zoom:1;声明

#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
    *zoom:1;
    *display: inline;
}

IE6/IE7/IE9对应的显示情况:
【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
小结:可以看到,这次显示的效果跟第四步的一样的了。结合第五步的结果,可以说明display前面的星号(*)和下划线(_)的作用对于IE6和IE7有区别。

那么问题真的解决掉了么?

衍生问题

  1. IE6、IE7是否真的支持inline-block属性值?为何说支持行内元素的设置inline-block,又说只是“表征”呢?

  2. “触发layout”中这个layout又是指的什么,触发的原理是什么?

  3. _zoom和_display具体是什么情况下使用的。

  4. *display和_display前面的星号(*)和下划线(_)有什么作用?

探讨延伸

首先来看下MSDN上关于inline-block属性值的解释:

将对象呈现为行内元素,但将对象的内容呈现为块元素。相邻的行内元素将呈现在同一行上,允许有空格。[2]

然而并不能用于解答“表征”inline-block的问题,好吧,那就当巩固知识点好了。
再来瞧瞧quirks mode上关于inline-block的解释:

IE 6/7 accepts the value only on elements with a natural display: inline.[3]

也就是说IE6/7是只对原生行内元素起作用,但是为何上面的实例中第一步显示的结果跟IE9和chrome的结果不一样呢?哦,对了,IE9和chrome是按照w3c标准支持inline-block属性值的。而前面说的对行内元素起作用或者说只有行内元素能够接受这个inline-bloc属性值,但并未说明是严格按照w3c标准支持的呀。有猫腻!
于是乎,根据“触发layout”就到了一个关于hasLayout这个(既)微(又)软专有属性的相关文章。
hasLayout是个什么鬼呢?这一切得从微软专有概念“layout”讲起。

“Layout” is an IE/Win proprietary concept that determines how elements
draw and bound their content, interact with and relate to other
elements, and react on and transmit application/user events.[4]

也就是说在IE下面layout是跟元素“随行”,每个元素都有个layout,只不过有些元素是天然显现出layout的或者说是天然触发了layout的(自带光环啊!摔),有些没有天然触发layout。而触发layout时,会有微软专有属性hasLayout赋值为true的行为,hasLayout=true,而且还是不可逆的,置于怎么把不可逆的“逆”回去,引文的“重度参考”里有,就不再探讨了。

当触发layout后,这个元素就可以像块级元素设置宽高边界等等属性了,但是一定要记住这跟w3c标准的块级属性的区别。因为触发layout后并不完全支持w3c标准的inline-block,在IE6/7下对块级元素设置inline-block,会覆“忽视”块级元素原生的display属性。也就是说对于一个块级元素直接设置inline-block并不能达到预期的目的。所以才需要用到*display:inline; *zoom:1; 这等IE hack。

但是为何行内元素直接设置,inline-block就不会被“忽视”原生的display属性呢?这还得从IE6标准版以前的版本说起。在那个“年代”,设置行内元素是可以设置宽高的,没错,你没看错,是可以设!置!宽!高!的!也就是微软家的行内元素其实一出生就是个行内块级元素,所以才会有IE6标准版以前的版本的“尺寸bug”。
不过,人家也确实不是完全按照W3C标准套路走的,微软自己搞出来的一套东西自己玩,你能说啥。IE6标准版以前的版本下行内元素是原生带有W3C标准中display:inline-block;的属性值的,我试过,确实是酱紫的,不信请看:

#two {
    background-color: lime;
    height: 2em;
}
#three {
    background-color: black;
    color: white;
    height: 3em;
    display: inline-block;
    *zoom:1;       /*这里可以省略,至于为什么,我说测试出来就是这样子,会被打死么*/
    *display: inline;
}

【CSS学习笔记】对于IE6、IE7下display: inline-block; 的兼容问题的探讨
但是,从IE6标准版开始,行内元素设置宽高是会被忽略的,所以看起来还像是有W3C标准中display:inline;属性的特性。

综上,我们可以解决第一个和第二个衍生问题了。对于IE6、IE7是否真的支持inline-block属性值,首先要明确我们常说的inline-block是W3C标准的属性值,是明确的区分行内元素、块级元素和行内块级元素的。但是微软不玩那一套,搞出个layout,通过一些特定的CSS属性来触发,表现为hasLayout=true,来使得一个元素有了W3C标准中inline-block的一些特性。

接下来,再说_zoom和_display以及*zoom和*display。这里前后的区别在于星号()和下划线(_)。其实下划线(_)是只有IE6才能识别,而星号()是只有IE6和IE7可识别,作用就是用于区分不同浏览器的。[5] 没错就是区分屌丝和高帅富的!
然后,为何要用_zoom和_display或者*zoom和*display呢?首先zoom又是微软的专有属性,平常多用zoom:1;来进行调试,其次zoom始终可以触发layout。[6] 而_display:inline;或者*display:inline;是为了让元素重新获得display:inline;的属性。也就是这两者已经可以完成与W3C标准中inline-block相似的特性了,那开头第二个解决方案为何前面还要加个display:inline-block;这不画色添足么?no,no,no。前面说了,这两个属性声明只是分别适用与IE6和IE6+IE7,对于其他浏览器是可以识别且按照W3C标准准确实现inline-block的,因此,才有了开头的代码:

display:inline-block; _zoom:1;_display:inline;

至此,第三和第四个衍生问题也解决了,有没有觉得对IE6、7的display属性的了解又有点增长呢?也不枉我花了好多事时间去查资料,码文章啦。

作者语

以上为根据一些网络资料加上部分个人实际测试得出的个人观点,或有错漏之处,还请指出以便交流学习。本人初发技术贴,也许水了点,还请轻拍。

其他

本文章对参考目录中的第一篇文章参考度很高,并且也觉得第一篇文章很不错,找时间用我“靠谱”的英语来翻译一下,顺便加深一下对IE“layout”的理解。

另外,找到一个测试IE块级元素inline-block的网页:IE block level element inline-block hack

测试工具

  1. IE浏览器兼容性测试软件:IETester

  2. 编辑器sublime text 3;

参考

  1. 重度参考:On having layout — the concept of hasLayout in IE/Win

  2. IE6/IE7下:inline-block解决方案

  3. IE css hack 汇总

  4. CSS hack大全

  5. MSDN关于display的解释;

  6. quirks mode上关于inline-block的兼容性解释:The display declaration

相关推荐

Simagle / 0评论 2017-10-16
impress / 0评论 2017-10-16