Question

我正在尝试使用以下代码将文本旋转到270度：

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

它适用于所有浏览器，但不适用于IE8。我做错了什么？

Answer 1

尝试使用：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');

-moz-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-webkit-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-o-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

Answer 2

IE使用另一个过滤器来旋转元素。

在这里你可以阅读它 http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

在这里，您可以轻松计算旋转矩阵http://www.boogdesign.com/examples/transforms/matrix-calculator.html的系数只需输入度数值，它就会生成所需的代码

您只需添加一行代码：

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";

Answer 3

IE8不支持此CSS元素。

请参阅：http://social.msdn.microsoft.com/Forums/eu/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866

如果你只是在IE8 +中旋转元素，你仍然需要一种跨浏览器的方法。这是因为从IE9开始不推荐使用IE过滤器，IE9现在支持CSS3 -ms-transform属性。但是，对于IE8及更早版本，需要使用BasicImage等过滤器来实现此效果。因此，为了满足当前使用的版本以及未来的变化，谨慎的方法可能是通过条件注释将过滤器提供给IE8及更早版本，但是否则使用转换集来满足当前浏览器的需要。

在IE8中将文本旋转到270度

3 个答案: