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 なし) では、要素が回転されますが、位置が間違っていて、表示が低すぎます。私は何を間違っていますか？要素の親は position:relative です。

ありがとう！

解決

私自身の質問を解決して申し訳ありませんが、IE9 でサポートされていない transform-origin 3 値 (これにより 3d-transform になると思います) を指定する際に間違いがありました。最後の「0」を削除すると、問題が解決しました。

4

1 に答える 1

1

@Spudleyが想定しているように、私は自分のソリューションをここに投稿するので、同じ問題を抱えている他の人に役立つかもしれません:

これらのバージョンの IE は 2D 変換のみをサポートするため、IE <= 9 に 3 つの値を使用しないでください。ただし、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 に答える