Question

我需要在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）中，元素旋转但位置错误，显示方式太低。我究竟做错了什么？父元素是position：relative btw。

谢谢！

解

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

Answer 1

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

你不能为IE＆lt; = 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;

希望它有所帮助。

IE9中错误定位的元素有transform：rotate

1 个答案: