IE中的行旋转

如何让IE8中的行旋转工作？我用this得到ms过滤器，但仍然不会工作..IE中的行旋转

这是一个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')"; 
}

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

来源

2013-03-27 Dawid van der Hoven

IE8不支持CSS3标准的旋转，但它确实有-ms-filter风格，它能够做同样的事情（虽然有更复杂的syn税收，以及一些烦人的警告）。但是，如果您准备使用一点Javascript，我强烈建议您使用一个好的polyfill脚本，这样即使对于旧版本的IE，也可以使用标准的CSS rotate语法。

我知道轮换的最好的polyfill脚本是CSS Sandpaper。（1）您的代码在浏览器之间更加一致，因此更容易维护，并且（2）您不需要学习可怕的东西-ms-filter语法。

所以不是的-ms-filter代码，你就会有一个线，看起来像这样：

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

除了rotate，CSS砂纸还实现了其他各种CSS3效果到老版本的IE浏览器，这使其成为一个非常有用的工具。

希望有所帮助。

来源

2013-03-27 10:24:58 Spudley

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-27 10:08:18

代码中的注释有点过时。从那以后，浏览器已经走过了很长的一段路;现在所有当前浏览器都支持'transform'属性没有前缀。（前缀版本仍然有用的旧版本的浏览器支持） – Spudley 2013-03-27 10:25:32

企图它..但它没有区别..除了行被转动了另一种方式...但仍然没有在IE8 – 2013-03-27 10:26:23

阿夫好吧..我会尽力找东西 – 2013-03-27 11:00:02

回答

相关问题