Metodo cross-browser per utilizzare la proprietà transform: scale css?

Question

Ho le seguenti regole css:

-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); 

che intendo applicare a un div per scalarla, compresi tutti i suoi contenuti, immagini, ecc, al 50% la sua dimensione, mantenendo lo stesso centro. Come probabilmente sai, le regole che ho elencato fanno esattamente questo, tranne per IE7-8.

Secondo this site, l'equivalente, regola di proprietà MS sarebbe:

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

Tuttavia, questi non sembrano ridimensionare in realtà il contenuto del div, sembra spostare la sua posizione, ma questo è tutto.

CSS3Please.com riporta diversi valori della matrice per essere l'equivalente per la scala (0,5):

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

ho testato questi entrava, ma l'effetto era lo stesso; il div sembrava cambiare la sua posizione, ma la dimensione effettiva del suo contenuto rimaneva invariata.

Infine ho provato transformie.js, che calcola la matrice tramite sylvester.js automaticamente si assegna la proprietà transform, ma il risultato finale era ancora:

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

Esattamente come quella che ho provato prima, che apparentemente non ha fatto altro che spostare la posizione del div.

io avrei provare cssSandpaper.js, ma sembra piuttosto gonfio per quello che intendo fare, in più c'è nessuna porta jQuery e non mi sento come l'aggiunta di cssQuery al progetto solo per questo. Le probabilità sono che i risultati sarebbero gli stessi di ciò che genera però transformie.js, perché sembra utilizzare anche sylvester.js.

Edit: Ho anche provato this che sembra provenire direttamente da Microsoft, e suggerisce il seguente metodo di calcolo matriciale:

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; 
} 

Purtroppo questo non scala il contenuto del div esso stesso. Sembra che questo non sia possibile, ma:

Come si può simulare il moderno transform: scale in IE8-7, in modo da ridimensionare effettivamente anche il contenuto div interno?

Forse sto cercando qualcosa che non esiste, ma volevo essere sicuro. Tutti i test sono stati fatti usando IE9 in modalità compatibilità per IE8 e IE7 (finora ha sempre fatto il lavoro, non credo sia inaffidabile, ma sentiti libero di correggermi se pensi diversamente)

Answer 1

I'm un po 'confuso dalla tua spiegazione. This fiddle in IE7-8 ridimensiona gli elementi interni per me correttamente con il primo set di codice che hai postato (sebbene tu indichi che non è stato ridimensionato, cambiando solo posizione). Quello che il codice non è fare (e non può fare) è ridimensionarlo dal punto centrale (è in alto a sinistra), e la trasformazione di matrice non può contenere una traduzione (è solo "Resizes, rotates, or reverses the content of the object"), quindi non è "mantenere stesso centro "come indichi il tuo desiderio.

C'è una pagina che ho trovato simile a transformie.js che hai notato nell'esecuzione della trasformazione, ma this other page parla al problema dell'origine della trasformazione che è centrata. In definitiva, per avere l'aspetto di essere ridimensionato al centro, è necessario includere un calcolo di qualche tipo per eseguire uno spostamento dell'elemento utilizzando position: relative.

In this fiddle Ho fatto facile su me stesso di fare un tale calcolo manualmente impostando un width sulla confezione div e conoscendo la height in base alle dimensioni interne. Questo potrebbe complicarsi con qualsiasi ridimensionamento dinamico, ma credo che dia i calcoli a farlo dinamicamente usando javascript (JQuery) anche con sylvester.js.

Answer 2

È inoltre possibile utilizzare la proprietà di zoom di IE:

zoom: 0,5

Questo dovrebbe fare quello che vuoi che faccia.