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

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

本文链接:参与评论 »

--EOF--

提醒:本文最后更新于 1790 天前,文中所描述的信息可能已发生改变,请谨慎使用。

Comments