CSS实现HTML元素透明的方法小结

2020-05-12 07:29:47易采站长站整理
hasLayout
true

设置
{display:inline-block}
的元素的
hasLayout
true

设置
{height:xx}
{width:xx}
的元素必须具体以下两个条件之一,其
hasLayout
才能为
true

IE8兼容模式和IE8以前的浏览器中,在标准(strict)模式下其

display
的值是
block
,如demo3就不行。
元素在怪癖模式(compat mode)下。

设置了

{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 团队推荐实现透明的方式是:

复制代码
{
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样:

复制代码
{
filter:alpha(opacity=30);
opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式,并且针对IE设置了

{zoom:1}
来让元素的
hasLayout
true
,但在IE8的标准模式下
zoom
并不能触发
hasLayout
,所以利用它们设置