2011-08-29 81 views
4

嗨问题,我想旋转文本,但我面临的一些问题与IE 8和9文本旋转 - 与IE

.casaText{ 
    display:block;  
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-filter:rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
    white-space:nowrap; 
    position:relative; 

在IE它好好尝试一下旋转。有谁能告诉我为什么?

感谢

+0

是什么问题的答案? –

+0

这个问题已经在这里回答: http://stackoverflow.com/questions/4617220/css-rotate-property-in-ie – nicolsondsouza

回答

1

我猜想它的这个特性导致了问题:

-ms-filter:rotate(-90deg); 

我不知道任何专有IE过滤器这样的。试试这个:

.casaText{ 
    display:block;  
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg); 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    white-space:nowrap; 
    position:relative; 
} 
+1

这是有线。我做了一个小提琴(http://jsfiddle.net/PrXsR),它在IE上很好,但是在我的网站上它不适用于IE。有任何想法吗?? – peterK

+0

@ user794035 IE阻止您的网站上的ActiveX控件或脚本? – robertc

1

有错误代码

-ms-filter:rotate(-90deg);

对于跨浏览器旋转使用此语法从css3please.com,而你的情况是这样的:

.casaText{ 
    -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
     -moz-transform: rotate(-90deg); /* FF3.5+ */ 
     -ms-transform: rotate(-90deg); /* IE9 */ 
     -o-transform: rotate(-90deg); /* Opera 10.5 */ 
      transform: rotate(-90deg); 
       filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17, sizingMethod='auto expand'); /* IE 6-9 */ 
       zoom: 1; /* IE hasLayout trigger */ 
} 
0

我用了以下,它运作良好。我从css-tricks.com发现它(这是一个很好的资源得说)。无论如何,为我工作。我意识到这有点迟了 - 哈 - 但也许它会帮助其他人找到像我一样的人。

filter:progid:DXImageTransform.Microsoft.Matrix(M11=$m11, M12=$m12, M21=$m21, M22=$m22, sizingMethod='auto expand'); 
1

使用矩阵的旋转:

这里是-90deg

filter: progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, sizingMethod='auto expand'); 
zoom: 1;