Question

我需要用CSS旋转文本。我有以下样式规则，但它们似乎不适用于Internet Explorer。

.footer #descr span {
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari y Chrome */
    transform: rotate(-20deg);  /* Safari y Chrome */
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

如何使用CSS在IE中旋转文本？

Answer 1

在IE9下面，Internet Explorer实际上没有内置支持CSS3或任何其他标准 Web技术（如SVG），允许您根据需要旋转文本跨平台。自IE6以来，微软已经包含了两种旋转元素的方式（例如文本），但更简单的方法只能在90度的增量下工作，如下所示：

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */

如果你真的需要达到你的例子所包含的340 / -20度，那么你需要尝试更难的事情，记录在这里：MSDN Matrix Filter。鉴于外观看起来有多么复杂，快速谷歌搜索显示了一个不错的计算器，可以为您生成-ms-filter CSS规则：Matrix Calculator。

请记住，这两个功能都是在IE9中弃用的，我相信支持-ms-transform。根据Microsoft定义为已删除或已建议弃用，您可能需要检查IE9是否未将文本旋转两次。

.footer #descr span {
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */
    -ms-transform: rotate(-20deg); /* IE9+ */
    -moz-transform: rotate(-20deg);  /* Firefox */
    -o-transform: rotate(-20deg);  /* Opera */
    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */
    transform: rotate(-20deg);
    font-size:40px;
    display:block;
    float: left;
    margin: 0 10px 0 0;
}

老实说，如果你打算使用HTML5和/或CSS3，那么我同意Duopixel的答案，即通过javascript包含CSS3库是明智的。鉴于Windows XP用户无法通过IE8升级，因此任何商业网站都支持它。

Answer 2

要在IE中使用它＆lt; 9你需要使用CSS Sand paper，这是一个用于CSS转换的polyfill：http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 3

对我的情况唯一有用的是使用CSS Sandpaper - 一旦我集成了，我尝试了以下CSS代码...

#vertbar p.name {
    -sand-transform: rotate(180deg);
}

瞧，瞧！ IE垂直旋转文本，从下到上阅读。但是，在所有其他浏览器中，此方向被视为270度。

我现在有其他浏览器以不同的角度将文本旋转到IE，好像IE坐标系是从前到后（我不会感到惊讶......）

我以为我会尝试使用条件注释来仅向IE浏览器提供-sand-transform规则。无论出于何种原因，IE忽略了这一点，因此甚至没有应用轮换（IE10是否忽略条件注释？）

所以现在我遇到了让所有浏览器都这样做的问题。重新排列规则的顺序，为IE设置180度，为其他设置270度，我终于有了一个CSS规则，可以在Firefox，Chrome，Safari和IE中垂直旋转文本，从头到尾阅读！

#vertbar p.name {
    -sand-transform: rotate(180deg);
    -webkit-transform: rotate(270deg) !important;
    -moz-transform: rotate(270deg) !important;
    -o-transform: rotate(270deg) !important;

    font-size: 14px;
    text-transform: capitalize;
    display: block;
    white-space: nowrap;
    height: 330px;
    text-align: left;
    color: #FFF;
    line-height: 40px;
    margin-top: 0px;
}

乌拉！希望这对某人有所帮助，我浪费了2个多小时试图将其排序。：P

更新：只想进行修正 - 所有浏览器中270度都是270度。我发现我有另一个旋转90度的规则，它被添加到180度的第二个规则，总共270个。所以有趣的是要注意旋转值是相对的（额外的？）而不是绝对的。

Answer 4

较旧版本的IE（8及以下版本）不支持CSS3

Answer 5

IE不支持CSS3的某些功能。解决方案：让它在IE中优雅地降级，让拥有现代浏览器的人享受现代网站。

Answer 6

这适用于IE：

-ms-transform: rotate(-20deg);

使用CSS和IE旋转文本

6 个答案: