3

次のコードを使用して、テキストを 270 度回転させようとしています。

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

すべてのブラウザで問題なく動作しますが、IE8 では動作しません。私は何を間違っていますか?

4

3 に答える 3

6

これを使用してみてください:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.00000000, M12=1.00000000, M21=-1.00000000, M22=0.00000000,sizingMethod='auto expand');

-moz-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-webkit-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);

-o-transform:  matrix(0.00000000, -1.00000000, 1.00000000, 0.00000000, 0, 0);
于 2012-08-10T11:41:58.827 に答える
5

IE は別のフィルターを使用して要素を回転させます。

ここでそれについて読むことができます http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

ここでは、回転行列の係数を簡単に計算できます http://www.boogdesign.com/examples/transforms/matrix-calculator.html 次数の値を入力するだけで、必要なコードが生成されます

コードを 1 行だけ追加する必要があります。

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.00000000, M12=1.00000000, M21=-1.00000000, M22=-0.00000000,sizingMethod='auto expand')";
于 2012-08-10T11:41:13.380 に答える
1

IE8 は、この CSS 要素をサポートしていません。

参照: http://social.msdn.microsoft.com/Forums/eu/iewebdevelopment/thread/9b21a3c2-6bdf-4aad-a90d-868bdeb3d866

IE8+ だけで要素をローテーションする場合でも、クロスブラウザー アプローチが必要です。これは、IE フィルターが IE9 で非推奨になり、IE9 が CSS3 -ms-transform プロパティをサポートするようになったためです。ただし、IE8 以前の場合、効果を得るには BasicImage などのフィルターが必要になります。したがって、現在使用されているバージョンと将来のバリエーションに対応するには、条件付きコメントを介してフィルターを IE8 以前にフィードするのが賢明なアプローチかもしれませんが、それ以外の場合は現在のブラウザーに対応するために変換セットを使用します。

于 2012-08-10T11:41:50.443 に答える