logo标签列表

使用CSS和IE旋转文本

htmlcssinternet-explorer
9

我需要用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中旋转文本？
6个回答
15

在IE9以下，Internet Explorer几乎没有内置支持CSS3或任何其他标准的Web技术，比如SVG，这些技术可以让您跨平台旋转文本。自从IE6以来，Microsoft已经包含了两种旋转元素（例如文本）的方式，但是更简单的方法只能按照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中被废弃，据我所知，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以后的版本，因此为了支持任何商业网站，这都是一个好主意。

4
4
我所遇到的情况唯一有效的方法是使用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度。因此，有趣的是旋转值是相对的（附加的？），而不是绝对的。

0

这适用于IE：

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

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

感谢您的回答，如果有其他方法可以在CSS 2或其他地方实现这个功能吗？ - Felipe Ignacio Victoriano Vict
0

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接