今天群里面的朋友问了一个问题:
<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，其他浏览器无效）。
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>
/* style for IE 6 + IE5.5 + IE5.0 */
.gainlayout { height: 0; }
</style><![endif]-->
<!--[if IE 7]><style>
.gainlayout { zoom: 1;}
/* or whatever we might need tomorrow */
</style><![endif]-->
注意这些方法都是有局限性的，具体请参照原文。
ie使用 float 要小心，具体见 http://www.satzansatz.de/cssd/onhavinglayout.html#clear
相关资料：
On having layout
HasLayout Overview
|