首先看看A级浏览器所支持的用CSS实现元素透明的方案：
| 浏览器 | 最低 版本 |
方案 |
|---|---|---|
| Internet Explorer | 4.0 | filter: alpha(opacity=xx); |
| 5.5 | filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); |
|
| 8.0 | filter: "alpha(opacity=xx)"; |
|
| Firefox (Gecko) | 0.9 (1.7) | opacity |
| Opera | 9.0 | opacity |
| Safari (WebKit) | 1.2 (125) | opacity |
实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms- filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。
IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：
body、img、table、tr、th、td等元素的hasLayout一直为true。type为text、button、file或select的input的hasLayout一直为true。- 设置
{position:absolute}的元素的hasLayout为true - 设置
{float:left|right}的元素的hasLayout为true - 设置
{display:inline-block}的元素的hasLayout为true - 设置
{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：- IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其
display的值是block，如demo3就不行。 - 元素在怪癖模式（compat mode）下。
- IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其
- 设置了
{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。 - 设置了
{writing-mode:tb-rl}的元素的hasLayout为true。 - 元素的
contentEditable的属性值为true。 - 在IE8标准模式下设置了
{display:block}的元素的hasLayout一直为true，如demo8。
关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout
从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE 团队推荐实现透明的方式是：
实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的 2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是