互联网浏览器上的文本旋转

Question

可能的重复：
CSS rotate property in IE

请问有没有人能帮忙在IE-8和IE-7版本上旋转文本。该代码在Chrome、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);
}

- Kiran SKK

Answer 1

我不建议在任何浏览器上操作，因为它们的渲染效果都不同..但你可以使用JavaScript实现。 文档 http://code.google.com/p/jquery-rotate/ 命令 $('#theimage').rotateRight(45); $('#theimage').rotateLeft();

使用画布对象而非浏览器渲染，这在IE 9、chrome、firefox、opera和safari中的显示效果相同。

IE8、7和6将使用旧编码。你可以在这里生成：http://www.useragentman.com/IETransformsTranslator/。

/* 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)

- Simon Dragsbæk

---

我将使用“-ms-filter”和“filter: progid”。 - Simon Dragsbæk

只需从库页面读取，它支持IE7和IE8。尚未测试。 - Raptor

该库已经通过以下测试：Mozilla FireFox 2.0.0.2，Internet Explorer 7.0，Opera 9.1（请注意，不支持Opera 8）。 - Simon Dragsbæk

是的，我甚至尝试了使用jQuery，但是旧版本的IE浏览器不支持文本旋转。 - Kiran SKK

我给了您一个工作测试，没有JS原因是我没有可以链接的git :) - Simon Dragsbæk

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);

- Moorthy GK

Answer 3

尝试使用这个在线服务：

http://www.useragentman.com/IETransformsTranslator/

它转换CSS3规则

rotate(-90deg)

应用于 div，宽度为 220px，高度为 70px。

针对IE浏览器的特定规则：

/*
 * The following two rules are for IE only and
 * should be wrapped in conditional comments.
 * The -ms-filter rule should be on one line 
 * and always *before* the filter rule if
 * used in the same rule.
 */

#transformedObject {

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

   /* IE6 and 7 */ 
   filter: progid:DXImageTransform.Microsoft.Matrix(
            M11=3.061515884555943e-16,
            M12=1,
            M21=-1,
            M22=3.061515884555943e-16,
            SizingMethod='auto expand');


   /*
    * To make the transform-origin be the middle of
    * the object.    Note: These numbers
    * are approximations.  For more accurate results,
    * use Internet Explorer with this tool.
    */
   margin-left: 71px; 
   margin-top: -78px;

} 

- Vladimir Starkov