Internet Explorer上的文本轮换

Question

可能重复:
IE中的CSS旋转属性

任何人都可以帮助旋转IE-8,IE-7版本上的文本.它正在使用Chome,firefox,IE-9,但在IE-8,IE-7上没有任何结果.

<a href="#" class="beta_home">BETA</a>

css
a.beta_home{
  position: absolute;
  text-decoration: none;
  top: 12px;
  right:0;
  margin-left: 0px;
  font-size: 9px;
  color:red;
  border: 1px solid #fff; 
  display: block; 
    -webkit-transform: rotate(-90deg);  
    -moz-transform: rotate(-90deg);  
    -ms-transform: rotate(-90deg);  
    -o-transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Answer 1

我不会喜欢在任何浏览器中做它因为它们都使它变得非常不同..但你可以用javascript做到这一点

文档 http://code.google.com/p/jquery-rotate/

命令 $('#theimage').rotateRight(45); $( '#theimage')rotateLeft();

这将在IE 9,chrome,firefox,opera和safari中呈现相同的原因,因为它使用canvas对象而不是通过浏览器呈现来转换文本

它将使用ie8,7和6的旧编码在这里生成它

/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');

工作前

IE 7和8测试了 Fiddle(在Chrome和其他浏览器中,边距需要不同,但不能说为什么,但确实如此)

如果你不知道如何通过不同的浏览器区分css,请看这个链接

我的看法

除此之外,我建议您使用photoshop将其作为图片(已经旋转)或者如果您无法访问此类程序使用免费(GIMP)

Answer 2

/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand')";
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=-0.1763269807084645, M21=0, M22=1, SizingMethod='auto expand');

/* For IE6 and 7 */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);