[小Tip]IE矩阵滤镜Matrix一个大坑 - 哈喽比特

1345次阅读 | 发布于5年以前

事情经过是这样的：今天某同学用 Matrix 滤镜实现了 IE 下的一个旋转效果，但在 IE6、7 下页面样式全部被搞乱掉，滤镜之后的 CSS 样式完全没生效。剥离无关代码后类似于这样：


<!DOCTYPE html>

    <html>
      <head>
        <meta charset="utf-8" />
        <title>Jerry Qu's HTML document</title>
        <style type="text/css">
        #img {
          filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');
        }
        body {color:red;}
        </style>
      </head>
      <body>
        <img id="img" src="https://st.imququ.com/static/uploads/2011/07/ququ_1_1_1.jpg" />这行文字应该是红色的。
      </body>
    </html>

用 IE6 或 7 打开这个页面，可以看到滤镜之后定义的样式没有生效。

这个问题产生的原因到现在我仍然没搞明白，先当作是浏览器 bug 了。经过测试，也很好绕过：

方法1：在 filter 值里插入一个空格。例如在 M12 前加上空格就正常了。测试地址

方法2：用 obj.style.cssText 这种方式设置 filter，也不会有问题。

我们的 css 代码上线前，都会经过 yui 压缩，所以方法 1 不管用，那个空格会被 yui 压掉。而方法 2 对代码改动较大。最后采用方案是：css build 工具在 yui 压缩完，再对 css 文件按方法 1 额外处理下。

个人感觉，IE 滤镜可以实现很多 CSS3 才加入的效果，微软实际上是非常超前的。只是这东西有点年老失修，时不时会出这样那样的问题，还是能少碰就少碰了。