1

我需要在我的 HTML5 应用程序中垂直旋转文本。

这适用于除 IE9 及更低版本之外的所有浏览器（尚无法在 IE10 中对其进行测试）：

.badgeWrapper > h3{
    -webkit-transform: rotate(-90deg) translate(-100%, 0%);
    -webkit-transform-origin: 0 0 0;
    -moz-transform: rotate(-90deg) translate(-100%, 0%);
    -moz-transform-origin: 0 0 0;
    -ms-transform: rotate(-90deg) translate(-100%, 0%);
    -ms-transform-origin: 0 0 0;
    -o-transform: rotate(-90deg) translate(-100%, 0%);
    -o-transform-origin: 0 0 0;
    transform: rotate(-90deg) translate(-100%, 0%);
    transform-origin: 0 0 0;
    width: 140px;
    position: absolute;
}

在 IE9（无 Quirksmode）中，元素旋转但定位错误，显示太低。我究竟做错了什么？元素父级是位置：相对的顺便说一句。

谢谢！

解决方案

很抱歉解决了我自己的问题，但是我在给出 IE9 不支持的 transform-origin 3 值（我想这使它成为 3d 变换）时出错了。删除最后一个“0”解决了这个问题。

4

1 回答 1

1

正如@Spudley 所说，我在这里发布了我的解决方案，所以它可能会帮助其他有同样问题的人：

您不能为 IE <= 9 使用 3 个值，因为这些版本的 IE 仅支持 2D 转换，但 3 个值似乎告诉浏览器它是（不受支持的）3D 转换。

所以这是错误的：

-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0 0;

这是正确且有效的：

-ms-transform: rotate(-90deg) translate(-100%, 0%);
-ms-transform-origin: 0 0;

希望能帮助到你。

于 2013-08-07T13:21:53.590 回答