问使用CSS和IE旋转文本

EN

在IE9下，Internet Explorer实际上对CSS3或任何其他标准web技术的内置支持为零，这些技术允许您随心所欲地跨平台旋转文本。自从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。

请记住，这两个特性在我认为支持-ms-transform的IE9中都是不推荐使用的。根据微软是否定义了弃用、删除或建议，您可能需要检查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以上版本，那么任何商业网站都支持它是一个好主意。

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

对于我的情况，唯一有效的方法是使用CSS砂纸-一旦我集成了它，我尝试了以下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度。因此值得注意的是，旋转值是相对的(附加？)而不是绝对的。