2013-09-23 21 views
8

ho questo foglio di stileCSS non trasforma lavorando IE

.rotate div img 
{ 
    -webkit-transform: translate(-18cm, 2cm) rotate(-90deg); /* WebKit */ 
    -webkit-transform-origin: top right; 

    -moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */ 
    -moz-transform-origin: top right; 

    -o-transform: rotate(90deg); /* Opera */ 
    -o-transform-origin: top center; 

    -ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */ 
    -ms-transform-origin: top right; 

    -sand-transform: translate(-18cm, 2.5cm) rotate(-90deg); 
    -sand-transform-origin top right; 

    max-width: 100% !important; 

} 

sto avendo problemi con IE, le trasformazioni sono applicati e stanno mostrando sullo schermo ma quando clicco sul pulsante di stampa, il risultato stampato è senza le trasformazioni applicate ad esso.

(schermo aggiunto nei media per vedere gli effetti, prima della stampa)

Funziona bene con Firefox e Chrome

EDIT

Sì, stavo testando su IE9.

Avendo giocato un po 'di più ieri, ho notato che l'immagine ha effettivamente fatto la parte di trasformazione, ma ciò che viene inviato alla stampante è l'immagine senza la trasformazione applicata ad essa.

+0

domanda Loaded, ma che versione di IE stai avendo problemi con? Solo "IE9" e "IE10" hanno il supporto di base, e solo "IE10" ha il supporto 3D: https://developer.mozilla.org/en-US/docs/Web/CSS/transform#Browser_compatibility – kunalbhat

+0

[Ecco una relazione domanda su IE9 che non stampa le trasformazioni] (http://stackoverflow.com/q/7868988/2930477) – misterManSam

risposta

6

-ms-transform non esiste in IE10 +. IE8 e versioni precedenti non supportano le trasformazioni CSS, IE9 utilizza solo -ms-transform e IE10 e le versioni più recenti utilizzano solo la prefisso transform.

Vedere http://caniuse.com/#feat=transforms2d per ulteriori informazioni se necessario.

-5

Non c'è bisogno di prefissi di fantasia, basta usare la normale trasformazione per selezionare MS IE!

0

I ha lo stesso problema, ma risolto attraverso la creazione di attributo media di tag di stile come segue

<style type="text/css" media="print">