介绍
IE中很多奇怪的渲染问题可以通过赋予其“layout”得到解决。这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout”的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?
定义
“layout”是一个IE/WIN的私有概念,决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。这种渲染特性可以通过某些CSS属性被不可逆转地触发。而有些HTML元素则默认就具有“layout”。
PS:一个对象的layout属性被激活,它的具体表现就是haslayout=true。我们可以用IE Developer Toolbar工具看到被激活的对象带有"haslayout = -1"的属性。
下列元素默认 hasLayout=true:
<html>, <body>
<table>, <tr>, <th>, <td>
<img>
<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>
<marquee>
微软干嘛要设layout这个东西呢?当一个对象的layout被激活时,它以及它的子对象的定位和尺寸计算将独立进行,不受附近对象的干扰。也就是说它拥有一个独立的布局(layout)。因此浏览器要花费更多的代价来处理拥有haslayout的对象。为了提高性能,微软增加了layout这个IE私有的概念。
很多情况下,我们把 hasLayout的状态改成true 就可以解决很大部分ie下显示的bug。
微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念),于是他们便使用了 layout , 也就是 hasLayout。
hasLayout 其实既不是一个属性更不是一个行为,而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念,在这个概念下渲染的元素将具有一种特性。
实际上这种渲染特性在有些 javascript:;" onClick="javascript:tagshow(event, 'HTML');" target="_self">HTML 元素中与身俱来,hasLayout属性不能直接设定,你只能通过设定一些特定的css属性来触发并改变 hasLayout 状态,将其触发为 true ,且一旦触发将不可逆转。
下面列出可以触发hasLayout的一些CSS属性值。
激活layout
position:absolute 设置绝对定位可能会引发新的问题
float:left|right IE下的浮动也会产生一些莫名其妙的问题
display:inline-block 当一个内联元素需要haslayout属性时就需要用它,但是IE本身不支持inline-block的,只是表现得像标准里说的inline-block
除“auto”外的任意值
height: 除“auto”外的任意值
对IE6及更早版本来说很常用,该方法被称为霍莉破解(Holly hack),即设定这个元素的高度为1%。但是要注意,当这个元素的overflow属性被设置为visible时,这个方法就失效了。
zoom: 除“normal”外的任意值
有一个IE的私有属性,不兼容标准。zoom:1可以在测试或者不追求标准的情况下使用。
writing-mode:tb-rl IE私有属性
IE7还有一些额外的属性:
min-height:(任意值)
max-height:(除none外任意值)
min- (任意值)
max- (除 none 外任意值)
overflow: (除 visible 外任意值)
overflow-x: (除 visible 外任意值)
overflow-y: (除 visible 外任意值)
position: fixed
重置haslayout
在没有其它属性激活layout的情况下,使用下面的css可以重置haslayout属性:
- width, height (设为 "auto")
- max-width, max-height (设为 "none")(在 IE 7 中)
- position (设为 "static")
- float (设为 "none")
- overflow (设为 "visible") (在 IE 7 中)
- zoom (设为 "normal")
- writing-mode (从 "tb-rl" 设为 "lr-t")
display 属性的不同:当用"inline-block"激活了haslayout 属性时,就算在一条独立的规则中覆盖这个属性为"block"或"inline",haslayout 这个标志位也不会被重置为 false。
把 mid-width, mid-height 设为它们的默认值"0"仍然会赋予 hasLayout,但是 IE 7 却可以接受一个不合法的属性"auto"来重置 hasLayout。
有关内联级别元素
对于内联元素(可以是默认即为内联的比如 span 元素,也可以是 display: inline 的元素)
width 和 height 只在 IE5.x 下和 IE6 的 quirks 模式下触发 hasLayout 。因为在 IE6 中,如果浏览器运行于标准兼容模式下,内联元素会忽略 width 或 height 属性,所以设置 width 或 height 不能在此种情况下令该元素具有layout。
zoom 总是可以触发 hasLayout,但是在 IE5.0 中不支持。
http://www.54xue.com/w/15/n-515.html