html - IE中的线旋转

Question

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

这是一个 JSFIDDLE .

这是 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) 您不需要学习可怕的 -ms-filter 语法。

因此，代替 -ms-filter 代码，您有一行看起来像这样:

-sand-transform: rotate(-45deg);

除了rotate，CSS Sandpaper 还在旧版IE 中实现了多种其他CSS3 效果，这使它成为一个非常有用的工具。

希望对您有所帮助。