Cross-Browser-Methode zur Verwendung der Transformation: Scale CSS-Eigenschaft?

Question

Ich habe folgende CSS-Regeln:

-webkit-transform: scale(0.5); /* Saf3.1+, Chrome */ 
    -moz-transform: scale(0.5); /* FF3.5+ */ 
     -ms-transform: scale(0.5); /* IE9 */ 
     -o-transform: scale(0.5); /* Opera 10.5+ */ 
      transform: scale(0.5); 

Was ich zu einem div anzuwenden, um die Absicht, es zu skalieren, einschließlich aller Inhalte, Bilder, usw., bis zu 50% seiner Größe, während die gleiche Mitte zu halten. Wie Sie wahrscheinlich wissen, machen die aufgeführten Regeln genau das, außer für IE7-8.

Nach this site, das entspricht, MS proprietäre Regel wäre:

/* IE8+ - must be on one line, unfortunately */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.5, M12=0, M21=0, M22=0.5, SizingMethod='auto expand')"; 

    /* IE6 and 7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.5, 
      M12=0, 
      M21=0, 
      M22=0.5, 
      SizingMethod='auto expand'); 

aber diese scheinen nicht wirklich, um den Inhalt der div Größe ändern, so scheint es, seine Position zu verschieben, aber das ist alles.

CSS3Please.com berichtet verschiedenen Matrixwerte das Äquivalent für Skala sein (0,5):

filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */ 
        M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand'); 

ich diese als gut getestet haben, aber die Wirkung war die gleiche; das div schien seine Position zu ändern, aber die tatsächliche Größe seines Inhalts blieb unverändert.

Schließlich habe ich versucht transformie.js, die automatisch die Matrix über sylvester.js berechnet, wie Sie die Transformation Eigenschaft zuweisen, aber das Endergebnis war noch:

M11=0.5, M12=0, M21=0, M22=0.5 

Genau das gleiche wie das, was ich zuerst versucht, die scheinbar tat nichts anderes als die Position des div zu verschieben.

ich würde versuchen cssSandpaper.js, aber es sieht ziemlich aufgebläht für das, was ich tun wollen, und es gibt keinen Port jQuery und ich fühle mich nicht cssQuery dem Projekt nur für das wie das Hinzufügen. Wahrscheinlichkeiten sind die gleichen Ergebnisse wie das, was transformie.js erzeugt, weil es scheint, auch sylvester.js zu verwenden.

Edit: Ich habe auch versucht this, die direkt von Microsoft zu kommen scheint, und schlägt vor, die folgende Matrixberechnungsmethode:

function resizeUsingFilters(obj, flMultiplier) { 
    // If you don't do this at least once then you will get an error 
    obj.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11='1.0', sizingmethod='auto expand')"; 
    // Resize 
    obj.filters.item(0).M11 *= flMultiplier; 
    obj.filters.item(0).M12 *= flMultiplier; 
    obj.filters.item(0).M21 *= flMultiplier; 
    obj.filters.item(0).M22 *= flMultiplier; 
} 

Leider hat dies den Inhalt des div nicht maßstabs entweder selbst. Es sieht so aus, als ob das überhaupt nicht möglich ist, aber:

Wie kann das moderne transform: scale in IE8-7 so simuliert werden, dass es tatsächlich auch die inneren div-Inhalte ändert?

Vielleicht bin ich auf der Suche nach etwas, das nicht existiert, aber ich wollte sicher sein. Alle Tests wurden mit IE9 im Kompatibilitätsmodus für IE8 und IE7 durchgeführt (bisher hat es immer die Arbeit getan, ich glaube nicht, dass es unzuverlässig ist, aber fühlen Sie frei, mich zu korrigieren, wenn Sie anders denken)

Answer 1

Ich bin ein bisschen verwirrt durch deine Erklärung. This fiddle in IE7-8 skaliert die inneren Elemente für mich ganz gut mit dem ersten Satz von Code Sie veröffentlicht (obwohl Sie angeben, es war nicht Skalierung, nur die Position zu ändern). Was dieser Code tut nicht tun (und kann nicht tun) ist es vom Mittelpunkt skalieren (es ist von oben links), und die Matrix-Transformation kann keine Übersetzung (es nur "Resizes, rotates, or reverses the content of the object"), so dass es nicht "halten gleiches Zentrum ", wie Sie Ihr Verlangen angeben.

Es gibt eine Seite, die ich ähnlich der transformie.js, die Sie bei der Durchführung der Transformation festgestellt haben, aber this other page spricht auf das Problem der Transformation Herkunft wird zentriert. Letztendlich müssen Sie, um den Eindruck zu erwecken, dass Sie auf das Zentrum skaliert werden, eine Berechnung einer Art einfügen, um eine Verschiebung des Elements unter Verwendung von position: relative vorzunehmen.

In this fiddle ich gemacht habe es auf mich einfach manuell eine solche Berechnung zu tun, indem eine width auf der Verpackung div Einstellung und zu wissen, die height auf der Grundlage der inneren Größen. Dies könnte mit jeder dynamischen Dimensionierung kompliziert werden, aber the link above Ich glaube, dass die Berechnungen es dynamisch unter Verwendung von Javascript (JQuery) mit der sylvester.js auch tun.

Answer 2

Sie können auch IE-Zoom-Eigenschaft verwenden:

Zoom: 0.5

Dies sollte tun, was Sie tun wollen.