认知：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、IE7支持但不完全支持display:inline-block属性

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，只对内联元素有效。

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

不断纠正认知！