带你深入剖析inline-block属性值的前世今生

曾几何时，display:inline-block 已经深入「大街小巷」，随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码。如今现代浏览器已经全面支持这个属性值了，上面的代码只是为了兼容 IE6、7 而已。那么你真的了解 inline-block 了吗？本文将带你深入剖析该属性值的前世今生，让你更好的理解和运用 inline-block。（本文约定 display:inline-block 简写为 inline-block）

开篇我们来看几个问题：

也许有人问你为何要写「 display:inline-block; *display:inline; *zoom:1; 」 来兼容 IE6、7 时，你会立马答道：因为 IE6、7 不支持 display:inline-block 呗!不知道何时起，惯性思维给开发者带来了这样一个可怕的概念。万物都是辩证的，当你写下这些的时候，可曾怀疑过大众观点真的可靠吗？也许你认为这些无关 紧要，实现效果就好。但是如果不能理解每个属性或属性值的根本，你将永远无法全面的了解它，人云亦云只会让你浅尝辄止，止步不前。那么这里就涉及到所谓的 「CSS 学习瓶颈」的问题了，这个问题张鑫旭《说说CSS 学习中的瓶颈》一文有详细阐述，虽然部分观点我不是很赞同，但是中心思想还是很值得思考的。文中有几个不错的问题这里也列举出来供大家观摩：

line-height:150% 和 line-height:1.5 的区别是？float 为何会让外部容器高度塌陷？这是 bug？（我的答案在《我们为何要清除浮动》）vertical-align 的表现为何在IE7, IE8, IE9 下表现不尽相同？其中的渲染机制是？

好了，回到 inline-block 的认知的问题，我的观点是：

IE 从 5.5 开始就已经支持 display:inline-block 了，只是支持的并不是那么完善。

在 msdn 微软开发者社区，找到了 IE 从5.5 开始支持 inline-block 的证据：

The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

这里明确指出：从 IE5.5 开始支持 inline-block。

链接：http://msdn.microsoft.com/zh-cn/library/ie/ms530751(v=vs.85).aspx

那么既然 IE5.5 开始就已经支持了 inline-block，为何我们还要写那么一坨 CSS 呢？同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的，触发了 hasLayout的元素表现出来的特征就是一个独立的矩形容器，可以设置宽高而且不受外部元素的影响，类似于现代浏览器中的 Block formatting contexts （块级格式化上下文）的概念。

下面来做一个详细的测试，分别看看 IE6 中 inline 元素和 block 元素的表现：

1）inline 元素 display:inline-block

IE6 中截图如下：

发表评论 共有条评论 用户名: 密码: 验证码: 匿名发表