0

如何使这条线旋转在 IE8 中工作？我用它来获取 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')";
}

非常感谢任何帮助..谢谢

4

2 回答 2

0 
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 */
于 2013-03-27T10:08:18.973 回答
0

IE8 不支持标准的 CSS3 旋转，但它确实有-ms-filter样式，它能够做同样的事情（尽管语法要复杂得多，还有一些烦人的警告）。

但是，如果您准备使用一点 Javascript，我强烈建议您为此使用一个好的 polyfill 脚本，这将允许您使用标准的 CSSrotate语法，即使是旧的 IE 版本。

我所知道的用于旋转的最好的 polyfill 脚本是CSS Sandpaper。

使用这意味着您可以使用（接近）标准 CSS 代码，这意味着（1）您的代码在浏览器之间更加一致，因此更易于维护，以及（2）您不需要学习可怕的-ms-filter语法。

-ms-filter因此，您将得到如下所示的一行，而不是代码：

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

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

希望有帮助。

于 2013-03-27T10:24:58.093 回答