在IE中旋转文本，不会变得难看

Question

我想逆时针旋转文字90度。 Firefox和Chrome没问题，使用：

-webkit-transform-origin: top left;
-webkit-transform: rotate(-90deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-90deg);

对于Internet Explorer，据我所知，它应该是这一行：

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

（另一种方法，书写模式，只能将文字顺时针旋转90度）。

然而，在IE中，旋转的文本看起来像一个严重缩放的图像（下面的比较）。

Firefox / Chrome - vs - Internet Explorer：

Internet Explorer是否可以以更优雅的方式（可能是Javascript / jQuery）旋转文本？我一直在谷歌搜索，但我只能找到更多参考这个方法...

Answer 1

它是IE中的文本渲染引擎;但是，它是可行的。

过滤器要求元素具有布局（即缩放）。您可以通过为元素提供背景颜色来击败渲染问题（大多数情况下）。在您的示例中尝试以下操作：

zoom:1;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
background-color:white;

Answer 2

IE的RenderEngine非常糟糕......我会尝试使用背景图片。也许像Cufon这样的字体替换可以做得更好。 Cufon生成文本图像。据我所知，在IE中运行良好。

Answer 3

我建议使用Google Fonts API或Cufon（如@swishmiller所说），或禁用IE中的抗锯齿（ClearType），这样字体看起来总是看起来不平滑（是一个单词）？< / p>

Google字体API：http://code.google.com/webfonts

Cufon：http://cufon.shoqolate.com/generate/

禁用ClearType：

    /* This will force IE into thinking there is a filter actually doing something, so it'll disable ClearType */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);

[edit] 我应该提一下，我没有尝试使用Google Font API修复...

Answer 4

尝试-ms-writing-mode属性： http://msdn.microsoft.com/en-in/library/ie/ms531187%28v=vs.85%29.aspx