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>

これは、テキストが他のブラウザーよりも約 90px 低く表示される Safari と Chrome を除いて、すべてのブラウザー (webkit を使用) で正常に機能します。

これを防ぐために、次のように追加しました。

@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 に答える