CSS3-Transformation: drehen; in IE9

77

Ich habe ein Element, das in einem Design, das ich gemacht habe, vertikal sein muss. Ich habe das CSS dafür in allen Browsern außer IE9 funktionieren. Ich habe den Filter für IE7 & IE8 verwendet:

progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Dies scheint jedoch mein Element in IE9 transparent zu machen und die CSS3-Transformations-Eigenschaft scheint nichts zu tun!

Kennt jemand sowieso rotierende Elemente in IE9?

Wirklich dankbar für die Hilfe!

W.

internet-explorer css rotation internet-explorer-9 wilsonpage
quelle

Antworten:

138

Standard CSS3 Rotate sollte in IE9 funktionieren, aber ich glaube, Sie müssen ihm ein Herstellerpräfix geben, wie folgt:

  -ms-transform: rotate(10deg);

Es ist möglich, dass es in der Beta-Version nicht funktioniert. Wenn nicht, laden Sie die aktuelle Vorschau-Version (Vorschau 7) herunter. Dies ist eine spätere Version der Beta. Ich habe keine Beta-Version zum Testen, daher kann ich nicht bestätigen, ob sie in dieser Version enthalten war oder nicht. Die endgültige Release-Version soll dies definitiv unterstützen.

Ich kann das auch IE-spezifisch bestätigen filter Eigenschaft in IE9 gelöscht wurde.

[Bearbeiten] Die
Leute haben um weitere Dokumentation gebeten. Wie sie sagen, ist dies ziemlich begrenzt, aber ich habe diese Seite gefunden: http://css3please.com/ die zum Testen verschiedener CSS3-Funktionen in allen Browsern nützlich ist.

Das Testen der Drehfunktion auf dieser Seite in der IE9-Vorschau führte jedoch zu einem spektakulären Absturz.

Ich habe jedoch einige unabhängige Tests mit durchgeführt -ms-transform:rotate() IE9 auf meinen eigenen Testseiten durchgeführt, und es funktioniert einwandfrei. Mein Fazit ist also, dass die Funktion implementiert ist, aber einige Fehler aufweist, die möglicherweise mit der dynamischen Einstellung zusammenhängen.

Ein weiterer nützlicher Bezugspunkt, für den Funktionen in welchen Browsern implementiert sind, ist www.canIuse.com - siehe http://caniuse.com/#search=rotation

[EDIT]
Diese alte Antwort wiederbeleben, weil ich kürzlich von einem Hack namens CSS Sandpaper erfahren habe der für die Frage relevant ist und die Dinge möglicherweise einfacher macht.

Der Hack implementiert die Unterstützung des Standard-CSS transformfür alte IE-Versionen. Jetzt können Sie Ihrem CSS Folgendes hinzufügen:

-sand-transform: rotate(10deg);

... und lassen Sie es in IE 6/7/8 funktionieren, ohne die filterSyntax verwenden zu müssen. (Natürlich wird immer noch die Filtersyntax hinter den Kulissen verwendet, aber dies erleichtert die Verwaltung erheblich, da die Syntax anderen Browsern ähnlich ist.)

Spudley
quelle
Danke Spud! Ich werde es jetzt überprüfen und darauf zurückkommen. Ich konnte nicht glauben, wie wenig Dokumentation es online gab.
Wilsonpage
@Spudley Könnten Sie eine Quelle posten? Ich kann das auf MSDN nicht finden msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx
Šime Vidas
@ Šime Vidas und @pagewil - Sie haben Recht, es gibt nicht viel Dokumentation. Ich fand es hier dokumentiert: css3please.com , obwohl ich beachten sollte, dass diese Seite meine Kopie der IE9-Vorschau zum Absturz brachte, als ich versuchte, die Eigenschaft rotate zu verwenden. Meine eigenen unabhängigen Tests haben jedoch bestätigt, dass die Eigenschaft mit dem in meiner Antwort angegebenen Herstellerpräfix funktioniert. (
Angesichts
Ich verstehe wirklich nicht, warum Rotation ein Herstellerpräfix benötigt, wenn sie mit dem Rest von CSS3
Eduardo Molteni
@Eduardo - möglicherweise weil der Standard noch nicht finalisiert wurde?
Spudley
5

Versuche dies

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
    margin-left: 50px;
    margin-top: 50px;
    margin-right: 50px;
    margin-bottom: 50px;
}
.rotate {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
}
</style>
</head>

<body>
<div class="rotate">Alpesh</div>
</body>
</html>
Alpesh Panchal
quelle
Ich versuche diesen Code mit IE9, FireFox, Chrome, Safari & es funktioniert
Alpesh Panchal
4

Ich hatte auch Probleme mit Transformationen in IE9, die ich verwendet habe -ms-transform: rotate(10deg)und die nicht funktionierten. Ich habe alles versucht, was ich konnte, aber das Problem war im Browsermodus. Damit Transformationen funktionieren, müssen Sie den Kompatibilitätsmodus auf "Standard IE9" setzen.

Katherine Mokhova
quelle
1
Drücken Sie f12 in dh und wählen Sie Ändern des Browsermodus auf ie-9 und überprüfen Sie dann, ob dies funktioniert ...
CSS Guy
3
Damit IE9 mit vertikalem Text arbeiten kann, müssen Sie den <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Mackenmodus deaktivieren,
3
Jeder gültige Doctype sollte den Quirks-Modus deaktivieren, z. B.: <! DOCTYPE html>. Der Browsermodus sollte standardmäßig IE9 sein, es sei denn, Sie haben Ihre Einstellungen geändert.
Superluminary
3

Ich weiß, dass dies alt ist, aber ich hatte das gleiche Problem, fand diesen Beitrag und obwohl es nicht genau erklärte, was falsch war, half es mir, die richtige Antwort zu finden - also hilft meine Antwort hoffentlich jemand anderem, der möglicherweise eine hat ähnliches Problem wie bei mir.

Ich hatte ein Element, das ich vertikal drehen wollte, also fügte ich natürlich den Filter hinzu: für IE8 und dann die Eigenschaft -ms-transform für IE9. Was ich gefunden habe, ist, dass IE9 das Element sehr schlecht rendert, wenn die Eigenschaft -ms-transform UND der Filter auf dasselbe Element angewendet werden. Meine Lösung:

  1. Wenn Sie die Eigenschaft transform-origin verwenden, fügen Sie auch eine für MS hinzu (-ms-transform-origin: links unten;). Wenn Sie Ihr Element nicht sehen, kann es sein, dass es sich um die Mittelachse dreht und somit die Seite irgendwie verlässt - überprüfen Sie dies also noch einmal.

  2. Verschieben Sie die Eigenschaft filter: für IE7 und 8 in ein separates Stylesheet und verwenden Sie eine IE-Bedingung, um dieses Stylesheet für Browser unter IE9 einzufügen. Auf diese Weise wirkt es sich nicht auf die IE9-Stile aus und alle sollten einwandfrei funktionieren.

  3. Stellen Sie sicher, dass Sie auch das richtige DOCTYPE-Tag verwenden. Wenn Sie es falsch haben, funktioniert IE9 nicht richtig.

Steve
quelle
1
Guter Anruf -ms-transform-origin; das hat mich eine Weile am Kopf kratzen lassen.
Danwild