今天群裡面的朋友問了一個問題:
<div style="background:#f00;filter:alpha(opacity=50);">111</div>
為什麼設定的透明度失效.
其實這個問題是IE特有的haslayout屬性引起的。隻有當haslayout=true時IE的filter才會起作用。
下面是關于haslayout的介紹:
hasLayout 是IE特有的一個屬性。微軟 filter 濾鏡要求 hasLayout=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.
下列元素預設 hasLayout=true
* <table>
* <td>
* <body>
* <img>
* <hr>
* <input>, <select>, <textarea>, <button>
* <iframe>, <embed>, <object>, <applet>
* <marquee>
下列屬性也會導緻 hasLayout=true
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
This is often an implicit fix, more often the trigger when hasLayout does things wrong.
height: any value
height: 1% is used in the Holly Hack.
zoom: any value (MSDN)
MS proprietary, does not validate. zoom: 1 can be used for debugging.
writing-mode: tb-rl (MSDN)
MS proprietary, does not validate.
inline 元素的特殊情況
* 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.
ie5.x和 ie 6 quirk 模式中，設定了 width 或者 height 屬性的元素 hasLayout=true。ie 6 standards-compliance mode（标準相容模式）時，設定了 width 或者 height 屬性的元素 hasLayout=false
* zoom always triggers hasLayout, but it's not supported in IE5.0.
zoom 會導緻 hasLayout=true，但 ie 5 不支援該屬性。
通過 x.currentStyle.hasLayout 來獲得 hasLayout 值（注意IE only，其他浏覽器無效）。
<p>段落 p</p>
<div>塊 div</div>
<table><tr><td>表格 td </td></tr></table>
<script>
objs=document.all
str=""
for(i=0;i<objs.length;i++){
str+=objs[i].tagName+"-"
}
//alert(str)
document.body.οnclick=function(){obj=event.srcElement;alert(obj.tagName+":"+obj.currentStyle.hasLayout)}
</script>
hasLayout 不可寫。也就是說，你不能通過 hasLayout=true 來設定 hasLayout 屬性，而隻能通過 width,height,zoom 等改變 hasLayout 狀态。
Another thing to consider is how “layout” affects scripting. The clientWidth/clientHeight properties always return zero for elements without “layout.” This can be confusing to new scripters and is different to how Mozilla browsers behave. We can use this fact to determine “layout” for IE5.0: If the clientWidth is zero then the element does not have layout.
hasLayout=false 元素傳回的 clientWidth/clientHeight 屬性總是0。比如下面的代碼
大多數情況下，我們是需要 hasLayout=true 的，通過CSS設定 hasLayout=true 的hack方法有：
* html .gainlayout { height: 1%; }
或者
.gainlayout { _height: 0; }
或者
<!--[if lte IE 6]>
<style>
.gainlayout { height: 1px; }
</style>
<![endif]-->
或者針對最近釋出的 IE 7 測試版
<!--[if lt IE 7]><style>
.gainlayout { height: 0; }
</style><![endif]-->
<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
</style><![endif]-->
注意這些方法都是有局限性的，具體請參照原文。
ie使用 float 要小心，具體見 http://www.satzansatz.de/cssd/onhavinglayout.html#clear
相關資料：
On having layout
HasLayout Overview
![電源完整性與地彈噪聲的高速PCB仿真[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)