[小Tip]IE矩阵滤镜Matrix一个大坑

❗ 本文最后更新于 4726 天前，文中所描述的信息可能已发生改变，请谨慎使用。

事情经过是这样的：今天某同学用 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 才加入的效果，微软实际上是非常超前的。只是这东西有点年老失修，时不时会出这样那样的问题，还是能少碰就少碰了。

本文链接：https://imququ.com/post/the-bug-of-ie-matrix-filter.html，参与评论 »

--EOF--

发表于 2012-01-13 22:15:22，并被添加「IE、IE滤镜」标签。查看本文 Markdown 版本 »

本站使用「署名 4.0 国际」创作共享协议，相关说明 »

JerryQu 的博客

[小Tip]IE矩阵滤镜Matrix一个大坑

Comments