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 文档头部的<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