html - Internet Explorer 上的文本旋转

<分区>

Possible Duplicate:
CSS rotate property in IE

谁能帮忙在 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);
}

最佳答案

我不喜欢在任何浏览器中执行此操作，因为它们都呈现出非常不同的效果..但您可以使用 javascript 执行此操作

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

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

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

它将使用 ie8、7 和 6 的旧编码生成它 here

/* 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，请参阅此 link

我的看法

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

关于html - Internet Explorer 上的文本旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13560906/