Bagaimana untuk Memutar Elemen DIV dengan Ijazah Tertentu dalam Internet Explorer?

Memutar DIV Menggunakan CSS rotate Property dalam IE

Css rotate property ialah alat yang berkuasa untuk mengubah elemen pada halaman web. Walau bagaimanapun, pengguna IE mungkin menghadapi masalah apabila cuba memutar elemen mengikut tahap tertentu.

Masalah

Untuk menggambarkan masalah, pertimbangkan gaya berikut:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Gaya ini memutarkan DIV kepada sama ada 90, 180, 270 atau 360 darjah. Walau bagaimanapun, jika matlamatnya adalah untuk memutarkan DIV sebanyak 20 darjah sahaja, pendekatan ini tidak berkesan.

Penyelesaian

Untuk memutar elemen mengikut darjah tertentu dalam IE, kod berikut diperlukan:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

Perhatikan bahawa kod untuk IE8 berbeza daripada kod untuk IE6/7. Untuk menyokong semua versi IE, kedua-dua baris kod diperlukan.

Perlu diambil perhatian bahawa nombor dalam kod mewakili Radian, bukan darjah. Oleh itu, mungkin perlu menukar sudut yang diingini kepada Radian untuk mencapai putaran yang diingini.

Keserasian Pelayar Lain

Semua penyemak imbas moden lain, termasuk IE9 dan IE10, menyokong gaya transformasi CSS3. Ini membolehkan penggiliran elemen menggunakan kod berikut:

-moz-transform: rotate(45deg); /* FF3.5/3.6 */
-o-transform: rotate(45deg); /* Opera 10.5 */
-webkit-transform: rotate(45deg); /* Saf3.1+ */
transform: rotate(45deg); /* Newer browsers (incl IE9) */

Pertimbangan Tambahan

• Sintaks IE6/7 boleh menyebabkan masalah dalam penyemak imbas lain disebabkan oleh aksara CSS yang tidak sah. Untuk mengelakkan isu ini, gaya IE tertentu boleh diletakkan dalam helaian gaya yang berasingan.
• Kertas Pasir CSS ialah perpustakaan JavaScript yang membolehkan penggunaan kod CSS standard untuk putaran, walaupun dalam versi IE yang lebih lama.
• IE9 mempunyai keanehan di mana menggunakan kedua-dua perubahan standard dan gaya -ms-filter boleh mengakibatkan masalah pemaparan. Untuk mengelakkan ini, adalah disyorkan untuk menggunakan poliisi Kertas Pasir CSS.

Atas ialah kandungan terperinci Bagaimana untuk Memutar Elemen DIV dengan Ijazah Tertentu dalam Internet Explorer?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!