Question

如何在IE8中使此行旋转工作？我使用this来获取ms-filter但仍然无法工作..

继承人HTML：

<div class="mainmenu">
    test
</div>

和CSS：

.mainmenu:before {
    background: none repeat scroll 0 0 #333333;
    content: "";
    display: block;
    height: 1px;
    position: relative;
    right: 12.5%;
    transform: rotate(-45deg);
    width: 35%;
    z-index:10000;

    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
}

任何帮助都非常赞赏..谢谢

Answer 1

IE8不支持标准的CSS3旋转，但它确实具有-ms-filter样式，它能够做同样的事情（尽管有更复杂的语法和一些讨厌的警告）。

但是，如果你准备使用一些Javascript，我强烈建议使用一个好的polyfill脚本，这样你就可以使用标准的CSS rotate语法，即使对于旧的IE版本也是如此。

我知道旋转的最佳polyfill脚本是CSS Sandpaper。

使用这意味着你可以使用（附近）标准CSS代码，这意味着（1）你的代码在浏览器之间更加一致，因此更容易维护，（2）你不需要学习可怕的{ {1}}语法。

因此，代替-ms-filter代码，您将拥有如下所示的行：

-ms-filter

除了-sand-transform: rotate(-45deg);之外，CSS Sandpaper还在旧的IE版本中实现了各种其他CSS3效果，这使它成为一个非常有用的工具。

希望有所帮助。

Answer 2

transform: rotate(45deg);  /* CSS3 (for when it gets supported) */
  -moz-transform: rotate(45deg);  /* FF3.5+ */
  -o-transform: rotate(45deg);  /* Opera 10.5 */
  -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */
  -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
  filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */

IE中的行旋转

2 个答案: