1
hasLayout的由来(简单理解):
在IE浏览器中,显示渲染引擎对元素的处理默认是每一个元素都应该有计算自身位置的功能,但是这样显而易见会引起性能问题,因此ie就折衷了一下,建立了一个叫hasLayout的属性来表示当前的元素是否进行自身位置计算;对于不需要进行自己进行计算布局和位置的元素,就依赖于块包含元素来进行计算;很明显这样就可以减少浏览器渲染时候的计算量,提高渲染速度;
2
hasLayout的特点:
这个属性有一些特点:
比如:单次触发性,即只要被触发了,就无法设置为false;
hasLayout就是一个css属性;
它没法直接通过css进行设置,而是间接进行设置的;比如可以设置zoom:1;等等(下面会有详细说明如何触发即令hasLayout:true;)
3
因为hasLayout属性的缺陷或者叫不兼容而引起的bug的一般表现特征:
·当前元素设置了浮动后(即脱离了文档流),后面的元素本应该往前占据位置,但是ie下表现出来的却浮动元素依然占位,给人一种没有浮动(脱离文档流)的错觉,这样的情况一般就是因为这个元素的hasLayout属性=true;导致这个元素重新计算了布局;
·高度塌陷问题,比如设置了浮动或者绝对定位的子元素,引起容器父元素的高度特显问题;(ps:这个问题我认为是不是应该认为子元素脱离了文档流的原因?跟hasLayout有个毛关系?)
4
怎么触发hasLayout属性为true?
首先有些元素本身的hasLayout等于true(即IE官方认为的这些元素本来就应该进行自己独立布局计算;)
html body table tr td th img hr input button select textarea fieldset legend iframe embed(这是个嘛东西?查查去···结论:html5的新标签,插入多种类型的资源,前提是浏览器支持这种类型的文件;)object(w3school原话:"object
的初衷是取代 img 和 applet 元素。不过由于漏洞以及缺乏浏览器支持,这一点并未实现。"尼玛,破玩意,不看了) applet(w3school原话:“HTML 4.01 中不赞成使用 <applet> 元素。”遗弃的东西,不看了) marqueen(文字滚动)
然后,通过简介属性触发hasLayout的又有哪些属性呢?
IE6:列表:display:inline-block;width除auto之外的任何合法值;position:absolute float:left or right;(ps:怪不得float元素在ie6下依然占位呢,原来重新计算了布局;) zoom除normal或者空值之外的合法值都可以;(这个见得最多了,另:zoom是ie的私有属性,不兼容标准的;)