【CSS笔记之十】深入认识display:inline-block和hasLayout

【CSS笔记之十】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三种。

再回顾一下display的值有哪些：

值	描述
none	此元素不会被显示，也不占位，不同于visibility：hidden的占位隐藏。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。（CSS2.1 新增的值）
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
compact	CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker	CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table	此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table	此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

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

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。

利用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......)无效。

    In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.

4) 两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。2、IE6/7不完全支持inline-block，只对内联元素有效。

5) 看官方的说法，确证对inline-block的认识

The following table shows Cascading Style Sheets (CSS) properties and corresponding values that, if set, cause an element to have layout.
下表列出一些CSS属性及其值，以下属性一旦设置，将触发元素的layout：
CSS propertyValue
display        inline-block
height        any value
float        left or right
positionabsolute
width        any value
-ms-writing-modetb-rl
zoom        any value

6)  延伸问题：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;}

认识了display:inline-block和hasLayout的原理和方法，在实际中解决相关的bug，让我们的CSS之路更加通畅！