深入认识display:inline-block和haslayout

一篇好的博文：

hasLayout设计的初衷是用于辅助块级元素的盒子模型的，它是用于块级元素的。如果用于行内元素，会引发一些特殊效果。

设置宽高属性width、height值都可以触发hasLayout，但是有时候带来副作用，现在常用zoom:1;来触发，极少数非常复杂的css设置情况zoom无效的时候，需要借助更为强大的“position:relative”来触发hasLayout。

块元素会独占一行，默认宽度自动填满其父元素宽度，可以设置width、height、margin、padding属性；行内元素一行排满才会换行，宽度随元素内容多少变化，设置width、height属性无效，只有水平方向的margin、padding边距有效果。
常见的块级元素有div、p、table、fieldset、form、ul、ol、dl、h1~h6、hr、pre、address、blockquote、center、dir、menu、noframes、noscript。
常见内联元素有input span strong em a abbr acronym br img select textarea等等。

可以通过修改display属性值转行块元素和行内元素。
display的值除了block和inline，还有其他值，例如list-item、teble-cell等，但因为IE6和IE7浏览器支持的display类型很少，所以为兼容IE，真正能用的display类型只有block、inline和none三种。

IE6、IE7支持但不完全支持display:inline-block属性,但IE8+和FF等标准浏览器支持。

利用hasLayout可以再不支持display：inline-blcok的IE6和IE7下模拟出display：inline-block的效果，实现IE6、IE7、IE8+和Firefox都兼容的display：inline-block的应用。但是也有一些问题需要特别注意：
1)  在IE6、IE7中不识别display:inline-block属性，但使用inline-block属性在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。
2)  在IE5.5中开始支持 inline-block 。你可以使用 inline-block 使对象获得布局而无需指定确切的高( height )和宽( width )。
3) IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效，对于块级元素(div,p,ul......)无效。
4) 两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block，只对内联元素有效。

延伸问题：IE下块元素如何实现 display:inline-block 的效果？
有两种方法：
1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下：
div {display:inline-block;}
div {display:inline;}
在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block给到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但是还是行布局（产生换行）。接下来要设置display: inline，更改这个div的布局为内联布局（不产生换行）。
2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（可使用zoom:1 等）。代码如下：
div {display:inline; zoom:1;}