Question

我们在使用转换规则的页面中添加了一些新的花式css，但是我们需要保持与IE8的兼容性，并且这些规则在那里不起作用。我们所做的就是旋转并翻译一些元素，然后我设法使用以下代码在IE8中进行旋转：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";

但是我不知道怎么做翻译部分。我试图在矩阵中添加第三列，看看它是否有效，但没有发生翻译。我尝试了有和没有px，但结果是一样的。我也尝试添加第三行（0,0,1），但这也不起作用。

我知道有针对此的解决方法库，但老实说它有点矫枉过正。我只需要将IE8特定的翻译添加到我已有的内容中。

Answer 1

我还没有弄清楚如何（或者我可以）使用-ms-filter在旋转旁边进行翻译，但我设法使用良好的旧边距来实现我的目标。

起初我以为我可以简单地使用\9 hack来定位IE8，但遗憾的是它不仅会影响IE8及以下版本，还会影响IE9和IE 10.

在测试期间，我还发现-ms-filter正在搞乱IE9，所以最后我使用条件注释添加了IE8特定的css：

<!--[if lt IE 9]>
<style>
    .something{
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=0.7071067811865475, M21=-0.7071067811865475, M22=0.7071067811865476)";
        margin-left:-40px
        margin-top:-40px
    }
</style>
<![endif]-->

如何在IE8中使用CSS进行旋转和翻译？

1 个答案: