之前只知道ie的haslayout会对IE的渲染产生影响，却不知道会对javascript也会产生影响。
在一个项目里面，为了让div可以自动适应高度并修复ie 的iframe滚动条bug，通过脚本来控制一个div的高度，但是怎么调脚本都有问题。我崩溃了。本来还以为是自己的逻辑出了问题，逐步排查之后，却发现某个元素的clientHeight，在ie下面是0。原来这个元素没有haslayout。
范例脚本：
<span id=”testHasLayout” style=”padding-top:20px;display:block”>test it</span>
<script type=”javascript/text”>
var obj=document.getElementById(”testHasLayout”);
alert(obj.clientHeight);
obj.style.zoom=”1″;
alert(obj.clientHeight);
</script>
原来如果在IE下，对象没有haslayout属性时，是没有办法通过脚本来获取他的clientHeight属性的。IE6,7均是如此
在这里再次回顾一下这个重要的概念：
默认拥有haslayout的元素：
- <html>, <body>
- <table>, <tr>, <th>, <td>
- <img>
- <hr>
- <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
- <iframe>, <embed>, <object>, <applet>
- <marquee>
能够让元素拥有haslayout的css属性
- position: absolute
- Refers to its containing block, and that’s where some problems begin.
- float: left|right
- The float model has a lot of quirks due to some aspects of a layout element.
- display: inline-block
- 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.
- width: any value other than ‘auto’
- This is often an implicit fix, more often the trigger when hasLayout does things wrong.
- height: any value other than ‘auto’
- height: 1% is used in the Holly Hack.
- zoom: any value other than ‘normal’ (MSDN)
- MS proprietary, does not validate. zoom: 1 can be used for debugging.
- writing-mode: tb-rl (MSDN)
- MS proprietary, does not validate.
As of IE7, overflow became a layout-trigger.
- overflow: hidden|scroll|auto
- This property did not apply in prior versions, unless “layout” was added to the box by other triggers.
- overflow-x|-y: hidden|scroll|auto
- As part of the CSS3 box model module, overflow-x and -y are not widely implemented yet. They did not trigger hasLayout in prior versions of IE.
And new hasLayout actors appeared on the screen in IE7. As far as hasLayout is concerned, the min/max properties act similar to how width and height works, and the effects of fixed and absolute positioning seem to be identical.
- position: fixed
- ./.
- min-width: any value
- Even the value 0 lets the element gain layout.
- max-width: any value other than ‘none’
- ./.
- min-height: any value
- Even the value 0 sets haslayout=true
- max-height: any value other than ‘none’
- ./.
一个元素是否具有haslayout，我们可以通过IE Developer Toolbar来查看
08月 7, 2008
我最讨厌的就是iframe