IE_haslayout_与众多bug的纠缠
haslayout是什么:
haslayout是IE的特有属性,就是has(有)layout(布局样式)!
在IE浏览器中,有的元素是默认“has” layout(有布局样式的),而有的元素是没有layout,需要后期激发layout的。微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局,会对性能和内存使用上产生有害的影响。
他们还认为元素都应该可以拥有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 has Layout,这种渲染特性生效时也就是将 hasLayout 设成了 true 之时。
“无layout”元素,是指 hasLayout 未被触发的元素,如一个未设定宽高尺寸的干净 div 元素就可以做为一个“无layout祖先”。
默认haslayout的元素:
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <select>, <textarea>, <button> <iframe>, <embed>, <object>, <applet> <marquee>
CSS赋予元素layout的方式:
position: absolute
float: left/right
display: inline-block 内联元素使用
width/height:除auto以外任意值,height: 1% 就在 Holly Hack 中用到
zoom:除normal以外任意值
在IE6+中,overflow: hidden/scroll/auto和min/max 和 width/height等也可以触发haslayout
haslayout造成的bug:
IE6 双空白边浮动 bug
IE6 3像素文本偏移bug
IE6 的躲躲猫(peek-a-boo) bug
haslayout小结:
当遇到IE渲染错误时可以首页试着激活haslayout来看看是不是此原因。推荐方式是设定元素zoom:1;这是IE的特有属性,而且不会影响效果。Holly hack用在IE6-版本,IE6+更适合用min-height:0;