认知：IE6、IE7支持但不完全支持display:inline-block属性

发布一个小时后，总感觉不安，查询了一些资料，决定修改本篇。

 

原文标题是：认知：IE6、IE7的确不识别display:inline-block属性，内容如下：

-------------------------------------自制分割线-----------------------------------------

 

虽然布局中经常用到display:inline-block，ie6,ie7也确实表现的跟“真”的一样，但是这 哥俩 确实是不识inline-block为何物的。。。

 

因为我曾经试着对div设置display:inline-block;来布局，FF没有问题，但是ie6不行依然将div解析为block，当时偶觉得是ie的bug。

 

今天在群里偶然被提起了，一位童鞋提供了一个网址，看了以后深表认同，看到此文的第一句

 

vapour 写道

在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。

 

立马就想到了之前div inline-block的尝试，无需犹豫了。

 

此文写的很清楚了，偶就无需多说，贴上链接，有研究的可以详细参看：

 

http://www.dovapour.com.cn/article/20090611175.html

 

 

-------------------------------------自制分割线-----------------------------------------

 

每个人都有自己的一些认知，建立在当前的基础之上，但是认知可以有进步。

 

对于这样的原文，感觉不安，于是还是多查点资料确认的好，否则误人误己。

 

苏昱(Rainer Su)出品的CSS手册，display一节有云：

 

写道

在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
在IE6.0中开始支持 list-item 。

 

这样说就是 IE5.5就支持inline-block了，IE6/7当然也支持，但是如何解释  块级元素无法呈现inline-block的效果呢？继续找资料。

 

找了几篇外国资料，取一个有代表性的：

 

http://www.quirksmode.org/css/display.html

 

截图：

 

 

 

 

IE6/7对于inline-block的支持处于不完全状态： 

写道

In IE 6 and 7 inline-block works only on elements that have a natural display: inline.

 意思是说，IE6/7的inline-block属性只对原生默认的内联元素(span, a, em......)有效，对于块级元素(div,p,ul......)无效。

 

 另外一个参考：http://homepage.ntlworld.com/spartanicus/ie_block_level_element_inline-block_hack.htm

 

写道

IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

 

那么现在有两个结论：

 

1、IE6/7不识别inline-block，只是触发了layout，表现跟真实一样。

2、IE6/7不完全支持inline-block，只对内联元素有效。

 

两者，我更倾向于第二个结论。如果你有更好的证据，请讨论。

 

不断纠正认知！

评论

5 楼 caiceclb 2010-04-27  

caiceclb 写道

http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx

点错了，直接就发了出去。。。

找到了官方的说法，应该算是最正宗的了吧。。

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.

以下属性一旦设置，将触发元素的layout：

CSS property Value
display         inline-block
height         any value
float         left or right
position absolute
width         any value
-ms-writing-mode tb-rl
zoom         any value

4 楼 caiceclb 2010-04-27  

http://msdn.microsoft.com/en-us/library/ms533776(VS.85).aspx

3 楼 caiceclb 2010-04-27  

或许表述改一下，IE认识display:inline-block;但是只作为触发layout用。。。。。。

2 楼 caiceclb 2010-04-27  

IE是个杯具的流行产物。对IE6这种应该被淘汰的东东还是不过多研究原因了，结果正确就行。一个清除浮动的例子，IE6可以用zoom:1;来清除浮动，同样display:inline-block;也是可以清除自身浮动的，喜剧的是发现FF3.5.7，Opera10.10也可以用这个来清除自身浮动，脑中没有之前哪位大牛对此做发表的记忆。

<div style="display:inline-block;border:1px solid red;">
	<p style="float:left;width:200px;height:200px;">外部div有1px的边框，这个段落p向左浮动</p>
</div>

1 楼 s79 2010-04-25  

第1条是正确的。

IE6以前的版本（也包括IE6及以后所有版本的混杂模式，其实这种混杂模式在渲染方面就相当于IE5.5），通过设置任何元素的width/height都可以使其hasLayout。但在IE6/IE7的标准模式中的行内元素上却不行，设置display:inline-block才可以，这时这个行内元素看起来有点像标准浏览器中的行内块，但实际并不是，只是它hasLayout罢了。要达到这个效果，未必一定要用display:inline-block，使用任何能使其hasLayout的办法都行：zoom:1、writing-mode:tb-rl等等。

为什么IE有这个奇怪的东西？
IE早期版本中没有Block formatting context的概念，而是使用hasLayout来达到类似的效果。

关于hasLayout，可以参考：
http://www.satzansatz.de/cssd/onhavinglayout.html
http://www.brunildo.org/test/InlineBlockLayout.html

关于Block formatting context，可以参考：
http://www.w3.org/TR/CSS21/visuren.html#block-formatting