IE6-8 filter双重滤镜bug的相关详解！
发布时间：2013-02-19 01:37:37作者：知识屋
最近在做一个旋转木马的特效时候碰到了一个很诡异的问题在IE8以下的IE内核浏览器中，当一个父级定义了filter的alpha时，如果它子级也有滤镜则这个层中的文字全部会变为灰色（小半透明形式展示）如下例：
- <!doctype>
- <html>
- <head>
- <style>
- .box-item{width:500px;height:200px;border:1px solid #333;position:relative;background:#f5f5f5;filter:alpha(opacity=100);opacity:1;}
- .infro-bx{font:bold 18px/50px 'songti';text-align:center;color:#f00;}
- .comment-bx{height:50px;width:100%;position:absolute;bottom:0;left:0;z-index:15;}
- .shade-bx{background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:5;}
- </style>
- </head>
- <body>
- <div class="box-item">
- <div class="comment-bx infro-bx">内容介绍</div>
- <div class="comment-bx shade-bx"></div>
- </div>
- </body>
- </html>
这个时候在IE下层里面的内容字体色展示效果会偏差非常大 特别是当filter中的opacity为80等不满一百的时候几乎为半透明灰色，而在IE9和其他非ie内核中却正常解析，由于项目的周期比较近迫于无奈，只能浪费一个链这个透明遮罩通过png图片去模拟，IE6下也就为不透明了。通过多次测试基于其他浏览器和IE9的正常解析个人把它归入了IEBUG（其实应该是它特有filter解析方式不一样引起的吧）；
（免责声明：文章内容如涉及作品内容、版权和其它问题，请及时与我们联系，我们将在第一时间删除内容，文章内容仅供参考）
相关知识
软件推荐
更多 >
-
1
英文强制换行css 使用css强制英文单词断行代码2013-02-18
-
2
CSS中marker-offset的使用方法
-
3
IE6-8 filter双重滤镜bug的相关详解！
-
4
css3中如何让多余的字符串消失并附加省略号的方法
-
5
CSS实现段落首行缩进的代码
-
6
CSS中使用expression完美设置页面最小宽度(兼容ie)
-
7
[前端笔记] border:none;与border:0;的区别
-
8
用css实现透视效果
-
9
css教程之绝对定位使用详解
-
10
CSS实现背景图片不规则的导航菜单
