web-dev-qa-db-de.com

CSS3-Transformation: in skalieren IE

Ich möchte die CSS3-Eigenschaft transform: scale verwenden.

div
{
     transform: scale(0.5,0.5);
}

Gibt es eine Möglichkeit, dies in Internet Explorer 8 und niedriger nachzuahmen? Kann etwas mit filter oder einer Javascript-Lösung sein?

Ich habe das Web ohne Ergebnis durchsucht.

Vielen Dank, Vincent

18
Vinzcent

IE9 unterstützt transform:

-ms-transform: scale(0.5,0.5);

Für andere Versionen von IE gibt es eine komplexe Syntax. Etwas wie das:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

Schauen Sie hier für weitere Informationen.

33
Pedram Behroozi

Nein, IE8 und frühere Versionen unterstützen nicht den Standardstil transform. IE9 unterstützt es jedoch.

Es gibt Lösungen, die Sie mit dem filter -Stil ausprobieren könnten, aber sie werden unordentlich.

Für den einfachen Fall, den Sie in der Frage beschreiben (im Wesentlichen eine einfache Verkleinerung), können Sie die IE-proprietäre zoom -Eigenschaft verwenden.

Da es kein Standard ist, wird zoom am häufigsten mitzoom:1 verwendet, um eine Reihe von IE-Layout-Störungen (insbesondere in IE6 und IE7) zu beheben. Es wird jedoch auch tatsächlich gezoomt, und Sie können mit zoom:0.5 den gewünschten Effekt erzielen.

Das Gute an der Verwendung von zoom ist, dass es in IE wie jede andere normale CSS-Eigenschaft funktioniert (die filter-Alternative hat einige ernstzunehmende Darstellungsfehler, über die Sie Bescheid wissen müssen).

Der einzige Nachteil der Verwendung von zoom ist, dass Sie es in IE9 oder höher deaktivieren müssten. Andernfalls wird es mit Ihrem transform-Stil beeinflusst und hat unerwünschte Auswirkungen. Ich unterstütze nicht generell die Verwendung von CSS-Hacks, aber Sie könnten den /9-Hack ( hier dokumentiert ) verwenden, um nur IE8 und frühere Versionen zu beeinflussen, dh Sie können sowohl transform als auch angeben das zoom im selben Stylesheet wie folgt:

div {
  transform: scale(0.5,0.5);
  zoom: 0.5\9;
}

Andernfalls müssen Sie bedingte Kommentare verwenden, um zu bestimmen, ob Sie sie verwenden möchten.

Wenn Sie etwas komplexeres als eine einfache proportionale Skala tun möchten, ist zoom nicht geeignet, aber für einen einfachen Fall wie den in Ihrer Frage wird es perfekt sein.

13
Spudley

http://msdn.Microsoft.com/de-de/library/ms533014(v=vs.85).aspx

filter in IE sind zwar nicht einfach zu verwenden und werden nicht immer mit anderen CSS-Effekten kombiniert.

aber IE 9 unterstützt scale https://developer.mozilla.org/de/CSS/transform

1
4esn0k
0
Asinox