- 一、 仅当一个元素既在 IE 早期版本中触发了 hasLayout，又在其他浏览器中创建了 block formatting context 时，才能避免bug的发生。即同时启用上述两者以保证各浏览器的兼容，或者相反，两者皆不启用。
1. 元素既生成 block formatting context，又触发 hasLayout；
hasLayout 的元素，通过 CSS 设置，使它产生 block formatting context； block formatting context 但是没有触发 hasLayout 的元素，通过设置 'zoom:1'，使其触发 hasLayout。
2. 元素即没有触发 hasLayout，又没有创建 block formatting context：
- 二、创建新的 block formatting context的方法
浮动元素（float: left | right）； 绝对定位元素（position: absolute | fixed）； 行内块元素（display: inline-block）； 表格的单元格（display: table-cells，TD、TH）； 表格的标题（display: table-captions，CAPTION）； 'overflow' 特性不为 visible 的元素（除非该值已经传播到视口）； 表格元素创建的 "匿名框" ； 弹性元素 (display: flex 或 inline-flex元素的子元素) 网格元素 (display: grid 或 inline-grid 元素的子元素) 多列容器 (元素的 column-count 或 column-width 不为 auto 即视为多列，column-count: 1的元素也属于多列) height: (任何值除了auto) width: (任何值除了auto) writing-mode: tb-rl Internet Explorer 7 还有一些额外的属性(不完全列表): * min-height: (任意值) * max-height: (除 none 外任意值) * min-width: (任意值) * max-width: (除 none 外任意值) * overflow: (除 visible 外任意值) * overflow-x: (除 visible 外任意值) * overflow-y: (除 visible 外任意值) * position: fixed
- 三、触发hasLayout的方法
1. 默认拥有布局的元素：
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>
2. 可触发 hasLayout 的 CSS 特性：
display: inline-block height: (除 auto 外任何值) width: (除 auto 外任何值) float: (left 或 right) position: absolute writing-mode: tb-rl zoom: (除 normal 外任意值)
3. IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout ：
min-height: (任意值) min-width: (任意值) max-height: (除 none 外任意值) max-width: (除 none 外任意值) overflow: (除 visible 外任意值，仅用于块级元素) overflow-x: (除 visible 外任意值，仅用于块级元素) overflow-y: (除 visible 外任意值，仅用于块级元素) position: fixed
- 四、需要触发hasLayout的情况
ie默认没有定义height和width就认为它们为0px,
bug 修复:给div加上overflow: hidden;
IE6 及更低版本的双空白边浮动 bug
bug 修复: display:inline;
IE5-6/win 的 3 像素偏移 bug,
IE6 的躲躲猫(peek-a-boo) bug:
bug 修复: _height:1%;
IE 很多常见的浮动 bug 。
元素本身对一些基本属性的异常处理问题。
容器和其子孙之间的边距重叠(margin collapsing)问题。
使用列表时遇到的诸多问题。
背景图像的定位偏差问题。
使用脚本时遇到的浏览器之间处理不一致的问题。
width=”100%”的table被没有width 的div包含时, IE忽略div的padding值和margin值
- 六、例子
分页单个链接可用圆角图片，实现自适应宽度功能。由父层的text-align属性定义对齐方式。
主要属性:display:inline-block；
布局
div#wrapper{float:left;width:100%}
div#content{margin: 0 25%}
div#navigation{float:left;width:25%;margin-left:-100%}
div#extra{float:left;width:25%;margin-left:-25%}
div#footer{clear:left;width:100%}
单元格的 colspan 属性在 IE 中可能影响 TABLE 元素的自动布局。
1. 设置 TABLE 的 'table-layout' 特性值为 fixed，使用固定布局的表格元素可避免此问题。 2. 单元格所跨过的列的宽度都设置成 auto。
避免出现紧密连接的内联元素标签
可以在每个标记之间加入空格或者换行符来避免这个问题。
align=”middle”
仅在 IMG、OBJECT、APPLET 元素上的 align 属性中是合法值
使用 ‘@charset’ 规则
请确保将其放在样式表的最开始，前边不能有任何字符。@charset "UTF-8";
空td单边框
table{border-collapse: collapse; empty-cells: show;}
如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 empty-cells 属性。
当 OBJECT 元素与其之前的行内文本的宽度之和超过其容器时
合理的设置容器及 OBJECT 元素的宽度。 若需要 OBJECT 元素不发生折行，则为容器设置 "white-space:nowrap" ； 若需要 OBJECT 元素折行，则在 OBJECT 元素之前加入明确的换行符 "<br />"
- 七、兼容标记
* IE6 IE7 _ IE6 \9 IE6+ \0 IE8+ \9\0 IE9+ :root el{\9\0} IE8*html IE6 IE7 *+html IE7
- 八、好的使用习惯
- 合理地设置容器的宽度、浮动元素的宽度、BFC 的宽度的值，尽量保证 BFC 的宽度小于 “容器的剩余空间宽度” 。若需要 BFC 折行显示在新的一行上，可以通过 BFC 设置 ‘clear’ 特性等手段使其换行。
- 声明 DTD 时，确保 DTD 之前没有其他字符，即便有，也只能是空格符、换行符和制表符。如将 DTD 放在 HTML 文档的第一行。
- 使用能触发标准模式 (S) 的 DTD，当给同一个元素设置 ‘width’、’height’ 时，它们的应用位置在所有浏览器的标准模式 (S) 中全部一致。
- 给浮动非替换元素指定一个宽度，而不使用其默认值 ‘auto’，从而避免其宽度为 shrink-to-fit，以使页面布局在各浏览器中的表现一致。