真~让IE8支持background: rbga; ,IE8下兼容rgba颜色的半透明背景

IE8下兼容rgba颜色的半透明背景

这样的标题在百度和google搜索下很多篇文章,讲解IE8下兼容rgba的。

这些文章全部都是使用IE下的filter来使元素透明,但是这个里面会有bug。

它们的如下:

background: rgba(0,0,0,.5);  /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
IE filter 的bug

简答评论下这个代码的问题,首先这代码在IE9+上就会有颜色叠加的bug,fliterIE9+也同样支持的

其次IE8上确实是可以运行,但是这个元素对css的:hover,js的click事件(其他事件没有测试)支持将变得怪异,这个bug我的理解是IE对使用了filter的对象将会降低它的层次,就想是使用的z-index的感觉,只是视觉上没有变化,看 例子

注意,在例子中只有有文字的地方才能触发hover事件和点击事件,没有文字的地方点击事件就直接穿这个div点击到了下面一层的div了。这里才是重点。

我的解决方式

代码先行

// css
.a1{
margin: 10px auto 0;
width: 200px;
height: 200px;
position: relative;
overflow: hidden;
background: lightblue
}
.a2{
width: 130px;
height: 160px;
margin-left: 20px;
margin-top: 20px;
background: pink
}
.a3{
position: absolute;
right: 0;
top: 50%;
margin: 20px;
height: 120px;
width: 110px;
margin-top: -60px; background: no-repeat, rgba(128,128,128,.5);
color: black;
font-size: 12px;
z-index: 2
}
.a3 > .background-mask{
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F808080,endcolorstr=#7F808080);
zoom: 1;
}
.a3:hover{
color: white;
}
//html
<div class="a1">
<div onclick="a2(this)" class="a2"></div>
<div onclick="a3(this)" class="a3">
我是a3,我用IE的filter属性的,我有hover看我的颜色,我还有click事件,分别点击文字和我的空白的地方
<!--[if IE 8]><div class="background-mask"></div><![endif]-->
</div>
</div>

可以看 例子 方便点

关键的地方是background: no-repeat, rgba(128,128,128,.5);用background的多个属性让background在IE8上永不生效,然后IE8用<!--[if IE 8]><div class="background-mask"></div><![endif]-->来生成背景

对于文字会被filter影响的问题,可以把文字和filter分开放,然后用z-index把文字内容放在filter上层,这样filter就不会把文字内容影响到了。

这次主要是说明了下ie8上兼容透明背景的使用,还是一个观点问题,背景就应该在内容的下方,这样就不会出怪异问题。使用了filter属性的元素注定只有当背景。

上一篇:转_IOS开源


下一篇:js插件设置innerHTML时,在IE8下报错“未知运行时错误”