4

好吧，我通常在这里找到我的问题的答案，但这次我没有，所以我现在要在这里问我的第一个问题！:)

我的页面上有一些旋转的文本，它使用 position:absolute 定位，如下所示：

.rotate-box .rotate-text{
    display: block;
    -webkit-transform: rotate(90deg);   
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: absolute;
    left: -45px;
    top: 170px;
}

<div class="rotate-box">
    <span class="rotate-text">Rotated text</span>
</div>

这在所有浏览器（带有 webkit）上都可以正常工作，除了 Safari 和 Chrome，其中的文本显示比其他浏览器低 90 像素。

为了防止这种情况，我添加了：

@media screen and (-webkit-min-device-pixel-ratio:0){
    .rotate-text {top: 80px !important;}
}

现在文本在所有浏览器中都位于正确的位置，但这对我来说感觉不对……我在这里遗漏了什么吗？

我讨厌添加浏览器异常代码，从长远来看，它往往会回来咬你......：o

问候，安德斯

4

2 回答 2

2

更改此行：

-webkit-transform: rotate(90deg);

到

-webkit-transform: rotate(90deg) translate(-100px, 16px);

如您所知，此行仅由 webkit 浏览器（Safari、Chrome）使用

您可能不得不使用确切的 px 数字，但随后您可以摆脱额外的 @media 屏幕标签。

于 2012-10-19T08:22:43.050 回答
1

调查transform-origin。基本上，您应该能够做到transform-origin: 0 0;（当然，使用所有前缀），并且它将旋转挂钩到左上角，这听起来像您想要的。

于 2012-03-07T13:07:39.357 回答