IE9 CSS HACK 减法解决了 IE9 下的神奇 filter 黑背景

问题描述

做半透明黑色遮罩时,使用 css filter 做 IE 下的半透明背景兼容,一般这样写: .semi-trans { background: rgba(0, 0, 0, .7); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000, endColorstr=#B2000000);} 然而,IE9 下这种滤镜 + CSS3 的样式会显示成全黑的背景。

减法解决

所谓减法,就是 CSS HACK 或者条件注释类来针对 IE9 覆盖之前的样式。 但是, filter 似乎是覆盖不了的,其机制似乎比较复杂,反正以下这几种都没有效果: filter:; filter:none; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF000000, endColorstr=#FF000000); 此外,由于 IE9 既单独支持这种 gradient filter ,又支持单独的 CSS3 样式,所以用减法将 CSS3 的属性去掉即可。

CSS3 HACK 覆盖法

:root .semi-trans {background:none\9\0;} /* 针对 IE9 10 的 hack */

条件注释类覆盖法

  1. 将 HTML 文档头部的改成类似这种形式: <!--[if lt IE 7 ]> <html lang="zh" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh" class="ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="zh" class="ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="zh" class="ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <!--<![endif]-->
  2. 然后在相应的 CSS 后面这样覆盖: .ie9 .semi-trans {background:none;}

参考文档

《解决了IE9下的神奇filter黑背景》 http://www.xlanda.net/posts/6965