IE伟大的haslayout

FoxLing — Tue, 19 Aug 2008 11:44:50 +0000

有时候，你会发现，在缩小窗口或者拖选内容，又或者拉动滚动条的时候，奇怪的情况发生了：

恭喜你，你终于碰到了所谓的haslayout问题

何为Haslayout：
　　“Layout”是一个 IE/Win 的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等，这有点类似于一个窗体的概念。

　　微软的开发者们认为盒状元素(box-type elements)应该具有一个“属性(property)”(这是面向对象编程中的一个概念)，于是他们便使用了 layout , 也就是 hasLayout。

　　hasLayout 其实既不是一个属性更不是一个行为，而是 IE 这个渲染引擎代代继承一贯拥有的一个渲染概念，在这个概念下渲染的元素将具有一种特性。

　　实际上这种渲染特性在有些 HTML 元素中与身俱来，而在另外一些元素中也可以通过一些 CSS 属性将其触发为 true ，且一旦触发将不可逆转。

　　这真是一个伟大的属性，你经常遭遇到的一些浮动问题，滤镜未生效，背景、边框的渲染问题，都是拜他所赐，这个属性还会导致的问题：

Many common IE float bugs.
Boxes themselves treating basic properties differently.
Margin collapsing between a container and its descendants.
Various problems with the construction of lists.
Differences in the positioning of background images.
Differences between browsers when using scripting.

IE 很多常见的浮动 bug 。

元素本身对一些基本属性的异常处理问题。
容器和其子孙之间的边距重叠(margin collapsing)问题。
使用列表时遇到的诸多问题。
背景图像的定位偏差问题。
使用脚本时遇到的浏览器之间处理不一致的问题。

下列元素默认 hasLayout=true






, , <button>
, , , <applet>
<marquee>
</pre>
<p>haslayout是不能设置的，只能触发，设置下列属性也会导致 hasLayout=true</p>
<blockquote><p>position: absolute<br />
Refers to its containing block, and that's where some problems begin.</p>
<p>float: left|right<br />
The float model has a lot of quirks due to some aspects of a layout element.</p>
<p>display: inline-block<br />
Sometimes a cure when the element is at inline level and needs layout. Applying layout is probably the only real effect of this property. The “inline-block behaviour” itself can be achieved in IE, but quite independently: IE/Win: inline-block and hasLayout.</p>
<p>width: any value<br />
This is often an implicit fix, more often the trigger when hasLayout does things wrong.</p>
<p>height: any value<br />
height: 1% is used in the Holly Hack.</p>
<p>zoom: any value (MSDN)<br />
MS proprietary, does not validate. zoom: 1 can be used for debugging.</p>
<p>writing-mode: tb-rl (MSDN)<br />
MS proprietary, does not validate.
</p></blockquote>
<p>inline 元素的特殊情况</p>
<blockquote><p>
width and height trigger hasLayout in IE 5.x and IE 6 in quirks mode only. As of IE6, when the browser is in “standards-compliance mode” inline elements will ignore the width and height properties, and setting the width and height properties will not cause the element to have layout.</p></blockquote>
<p>ie5.x和 ie 6 quirk 模式中，设置了 width 或者 height 属性的元素 hasLayout=true。ie 6 standards-compliance mode（标准兼容模式）时，设置了 width 或者 height 属性的元素 hasLayout=false</p>
<blockquote><p>zoom always triggers hasLayout, but it's not supported in IE5.0.</p></blockquote>
<p>zoom 会导致 hasLayout=true，但 ie 5 不支持该属性。</p>
<p>更详细，更YD的请参阅：<a target="_blank" href="http://forest.blogbus.com/logs/2006/04/2340409.html">http://forest.blogbus.com/logs/2006/04/2340409.html</a></p>

</article>
<article>
<h1>用@cc_on 语句简便判断IE浏览器</h1>
<p>FoxLing — Fri, 25 Apr 2008 21:52:47 +0000</p>
<pre>
/*@cc_on
alert(@_jscript_version);
@*/
</pre>
<p>这是一个被注释掉的代码？NO~这段代码是可以在IE浏览器里执行的，忽略其他所有浏览器。<br />
如果你只需要判断IE与非IE浏览器，这是一个不错的选择<br />
你只需这样：<br />
<code>var isMSIE = /*@cc_on!@*/!1;</code><br />
不记得在某仙的Blog中看到有用到@cc_on，搜索了一下，发现@cc_on是很好玩的东西嘛，挺实用，嘿嘿。<br />
更详细的内容请看：http://www.blueidea.com/tech/web/2006/3238.asp</p>

</article>
</main></body></html>

FoxLing - 前端开发 » IE

IE伟大的haslayout