IE hasLayout效率测试(载入包含53100个“<div><p>hasLayout test</p></div>”标签的页面):
(文本较大,请下载至本地测试:haslayout.zip)
什么情况下hasLayout不会出现?
一般情况都不会出现,当然除了下面罗列的默认具有hasLayout的元素和使用特定样式触发以外;
它会带来各种诡异表现,当你发现IE7-出现了一些不可思议的问题,首先要检查的就是是否是hasLayout在捣鬼;
hasLayout只出现在IE7及更早版本中,IE8不存在hasLayout解析模式,我们只讨论指定doctype的情况。
hasLayout的触发条件:
- position: absolute(IE5+)
- float: left|right(IE5+)
- display: inline-block(IE5+)
- width: "auto"以外的任何值(IE5+; 对inline元素无效)
- height: "auto"以外的任何值(IE5+; 对inline元素无效)
- zoom: "normal"以外的任何值(IE5.5+; IE私有属性)
- writing-mode: tb-rl(IE5+; IE私有属性)
- overflow: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不能应用在未触发hasLayout的元素上)
- overflow-x|-y: hidden|scroll|auto(IE7; 此属性在IE6及更早版本中不触发hasLayout; 此属性在CSS3中才获支持)
- position: fixed(IE7)
- min-width: 任何值(IE7; 即使是0)
- max-width: "none"以外的任何值(IE7)
- min-height: 任何值(IE7)
- max-height: "none"以外的任何值 (IE7)
- position: fixed(IE7)
清除或重置hasLayout:
- position: static(IE5+)
- float: none(IE5+)
- display: "inline-block"以外的任何值(IE5+)
- width|height: "auto"(IE5+; 对inline元素无效)
- zoom: "normal"(IE5.5+; IE私有属性)
- writing-mode: 从'tb-rl'到'lr-tb'(IE5+; IE私有属性)
- max-width|max-height: "none"(IE7)
- overflow: visible(IE7)
默认具有hasLayout的元素:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
参考:
资料来源:<onhavinglayout>