Wie drehe ich ein DIV-Element im Internet Explorer um einen bestimmten Grad?

Ein DIV mit der CSS-Rotate-Eigenschaft im IE drehen

Die CSS-Rotate-Eigenschaft ist ein leistungsstarkes Werkzeug zum Transformieren von Elementen auf einer Webseite. Allerdings können IE-Benutzer auf Probleme stoßen, wenn sie versuchen, ein Element um einen bestimmten Grad zu drehen.

Problem

Um das Problem zu veranschaulichen, betrachten Sie den folgenden Stil:

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

Dieser Stil dreht den DIV entweder um 90, 180, 270 oder 360 Grad. Wenn das Ziel jedoch darin besteht, das DIV nur um 20 Grad zu drehen, ist dieser Ansatz wirkungslos.

Lösung

Um ein Element im IE um einen bestimmten Grad zu drehen, ist der folgende Code erforderlich:

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 */

Beachten Sie, dass sich der Code für IE8 von dem für IE6/7 unterscheidet. Zur Unterstützung aller IE-Versionen sind beide Codezeilen erforderlich.

Es ist zu beachten, dass die Zahlen im Code Bogenmaß und nicht Grad darstellen. Daher kann es erforderlich sein, den gewünschten Winkel in Bogenmaß umzuwandeln, um die gewünschte Drehung zu erreichen.

Kompatibilität mit anderen Browsern

Alle anderen modernen Browser, einschließlich IE9 und IE10, unterstützen den CSS3-Transformationsstil. Dies ermöglicht die Rotation von Elementen mithilfe des folgenden Codes:

-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) */

Zusätzliche Überlegungen

• Die IE6/7-Syntax kann in anderen Browsern aufgrund eines ungültigen CSS-Zeichens Probleme verursachen. Um dieses Problem zu vermeiden, können bestimmte IE-Stile in einem separaten Stylesheet platziert werden.
• CSS Sandpaper ist eine JavaScript-Bibliothek, die die Verwendung von Standard-CSS-Code für Rotationen ermöglicht, auch in älteren IE-Versionen.
• IE9 weist eine Besonderheit auf, bei der die Verwendung sowohl der Standardtransformation als auch des -ms-filter-Stils zu Rendering-Problemen führen kann. Um dies zu vermeiden, wird empfohlen, stattdessen die Polyfüllung CSS Sandpaper zu verwenden.

Das obige ist der detaillierte Inhalt vonWie drehe ich ein DIV-Element im Internet Explorer um einen bestimmten Grad?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!