转载请注明:来自于http://www.cnblogs.com/bluers/

问题:

  假设结构如下:

  

<div class="wrapper">
<p class="cover"></p>
<img src="http://gg.blueidea.com/2014/360/360.jpg">
</div>

  若背景需要透明,通常会这么写:

  

.wrapper{
position:relative;
width:100px;
height:100px;
}
.cover{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
background-color:#000;
filter:alpha(opacity=50);
}

在IE7,8,10以及chrome,firefox下正常。但在IE9下会产生双重透明的情况。见图

原因:IE9识别filter,也识别rgba,所以导致了双重透明。而目前还没有只在IE9下生效的CSS HACK(如有请指正),<!-- if IE9 -->除外。

解决办法:

.wrapper{
position:relative;
width:100px;
height:100px;
}
.cover{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
background-color:#000;
filter:alpha(opacity=50);
}
.cover:not(IE9Only){
filter:alpha(opacity=100);
}

重点在于这个小精灵【:not(selector)】,selector随意

解释:

  :not(selector)仅仅在IE9+下生效。IE9会自动忽略:not以及之后的内容并生效与当前元素,但IE10会产生实际作用。

因此IE9下,生效的代码为

.cover{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
background-color:#000;
filter:alpha(opacity=50);
}
.cover{
filter:alpha(opacity=100);
}

而IE10生效的代码为

.cover{
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.5);
background-color:#000;
filter:alpha(opacity=50);
}

从而很好的分辨出了IE9。这也可以作为IE9单独使用的一个css hack。

IE9透明filter和opacity同时生效的解决办法 IE9 hack only的更多相关文章

  1. Git忽略规则及.gitignore规则不生效的解决办法

    在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如无,则需自己手工建立此文件).这个文件每一行保存了一个匹配的规则例如: # 此为注 ...

  2. .gitignore规则不生效的解决办法

    .gitignore规则不生效的解决办法 使用git 的时候,在.gitignore中已经添加了某个文件或者文件夹,但是使用git status还能看见该文件的修改提示--–说明.gitignore未 ...

  3. Git忽略规则和.gitignore规则不生效的解决办法

    Git忽略规则和.gitignore规则不生效的解决办法   Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改根目录中 .gitignore 文件的方法(如果 ...

  4. 【转载】Git忽略规则和.gitignore规则不生效的解决办法

    原文:https://www.cnblogs.com/zhangxiaoliu/p/6008038.html Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 ...

  5. discuz论坛后台部分设置更改之后,清除了缓存网站前台不更新不生效的解决办法

    discuz论坛后台部分设置更改之后,清除了缓存但网站前台不更新不生效的解决办法 在config/config_global.php  把  $_config['memory']['eaccelera ...

  6. 微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法

    微信小程序警告设置 enable-flex 属性以使 flexbox 布局生效的解决办法 具体情况: scroll-view 滚动,设置 display:flex 不生效并警告设置 enable-fl ...

  7. git忽略文件夹提交以及gitignore修改后不生效的解决办法

    1.在 .gitgnore 文件加入需要忽略的问价夹正则表达式: 在配置完以后提交代码,你可能会发现git忽略配置不生效! 解决办法,将缓存的文件重新添加一下即可 2.打开命令行,将下面三个命令复制粘 ...

  8. IOS设备上给body绑定click事件不生效及其解决办法

    事件背景: 最近在做一个移动端业务的时候碰到一个bug,在ios上对body绑定click事实现事件代理冒泡至某些元素上尽然不生效. 思考: 暂借助jquery展示下事件绑定代码,将所有标签含有dat ...

  9. 本地修改js代码并时时生效的解决办法

    js作为客户端语言(当然它也可以作服务端语言),非常强悍,一般情况下,我们都是在开发阶段不停的改,然后上线之后就作为稳定运行的代码. 然而有时候可能因为js写得有问题,导致上线后,某些功能无法使用,这 ...

随机推荐

  1. 一个简单的DELPHI程序注册码设计 .

    当你辛辛苦苦用DELPHI做好了一个你认为十分不错的程序,你是否想把它发布出去成为共享软件呢  做为一个共享软件,注册码肯定是少不了的,你可以通过判断程序是否注册来进行功能,时间或一些其它限制.现在就 ...

  2. A*寻路算法的探寻与改良(三)

    A*寻路算法的探寻与改良(三) by:田宇轩                                        第三分:这部分内容基于树.查找算法等对A*算法的执行效率进行了改良,想了解细 ...

  3. 【ACM/ICPC2013】二分图匹配专题

    前言:居然三天没有更新了..我的效率实在太低,每天都用各种各样的理由拖延,太差了!昨天的contest依旧不能让人满意,解出的三题都是队友A的,我又卖了一次萌..好吧废话不多说,今天我要纪录的是二分图 ...

  4. 如何设置textarea光标默认为第一行第一个字符

    判断文本区是否有内容,如果没有那么光标肯定是在第一行第一个为止的,记住,空格回车也算是有内容在的,也会影响光标的位置

  5. 鸟哥的Linux私房菜 第十八章、认识系统服务 (daemons)

    什么是 daemon 与服务 (service) Linux Daemon (守护进程)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务或等待处理某些事件.它不需要用户输入就能运行 ...

  6. CSDN被黑几年后 我决定继续blogs

    CSDN被黑几年后 我决定继续blogs 可惜了我那么多年的文章,全没了 希望这个博客顺风顺水---2015-12-23

  7. Redis未授权访问缺陷让服务器沦为肉鸡

    朋友的一个项目说接到阿里云的告警,提示服务器已沦为肉鸡,网络带宽被大量占用,网站访问很慢,通过SSH远程管理服务器还频繁断开链接.朋友不知如何下手,便邀请我帮忙处理. 阿里云的安全告警邮件内容: 在没 ...

  8. Zend Framework 2参考Zend\Authentication(数据库表认证)

    + 转载自:Zend Framework 2参考Zend\Authentication(数据库表认证) 介绍 Zend\Authentication\Adapter\DbTable提供对存储在数据库表 ...

  9. cas改造随笔

    原http://www.cnblogs.com/hellowood/archive/2010/08/05/1793364.html 键字: sso域名:cas.server.com 登陆地址(spri ...

  10. java+springboot+bootstrap-fileInput 文件上传前后台完整示例

    先看效果图