Rotazione del testo con CSS e IE

Question

Ho bisogno di ruotare il testo con CSS. Ho le seguenti regole di stile ma non sembrano funzionare in Internet Explorer.

.footer #descr span { 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari y Chrome */ 
    transform: rotate(-20deg); /* Safari y Chrome */ 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

Come posso ruotare il testo in IE con i CSS?

Answer 1

vecchie versioni di IE (8 e sotto) non supportano CSS3

Answer 2

IE non supporta alcune funzionalità di soluzione CSS3.The: lasciare che si degrada con grazia in IE e lasciare che le persone con un browser moderno godono di siti web moderni .

Answer 3

per ottenere questo lavoro in IE < 9 si avrebbe bisogno di utilizzare carta CSS di sabbia, che è un polyfill per le trasformazioni CSS: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

Answer 4

Sotto IE9, Internet Explorer ha praticamente zero il supporto integrato per CSS3 o qualsiasi altro le tecnologie web standard come SVG che consentono di ruotare il cross cross testo come si desidera. Microsoft ha incluso due modi di IE6 in quanto elementi rotanti (ad esempio testo), tuttavia il metodo più semplice funziona solo in incrementi di 90 gradi, in questo modo:

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* 0=0, 1=90, 2=180, 3=270 */ 

Se si ha realmente bisogno per raggiungere tale 340/-20 gradi hai inserito nel tuo esempio quindi dovrai cimentarti in qualcosa di più difficile, documentato qui: MSDN Matrix Filter. Considerato il modo in cui questo aspetto è inutilmente complesso, una rapida ricerca su Google ha rivelato una bella calcolatrice che genererà una regola CSS -ms-filter per te: Matrix Calculator.

Tenere a mente che entrambe queste funzionalità sono destinate a essere deprecate in IE9 che, a mio avviso, supporta invece -ms-transform. A seconda che Microsoft definisca deprecato come rimosso o sconsigliato, potresti voler controllare che IE9 non stia ruotando il tuo testo due volte.

.footer #descr span { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')"; /* IE6-8 */ 
    -ms-transform: rotate(-20deg); /* IE9+ */ 
    -moz-transform: rotate(-20deg); /* Firefox */ 
    -o-transform: rotate(-20deg); /* Opera */ 
    -webkit-transform: rotate(-20deg); /* Safari & Chrome */ 
    transform: rotate(-20deg); 
    font-size:40px; 
    display:block; 
    float: left; 
    margin: 0 10px 0 0; 
} 

Per essere onesto, però, se avete intenzione di fare uso di HTML5 e/o CSS3 allora sarei d'accordo con la risposta di Duopixel che comprende una libreria CSS3 tramite javascript sarebbe sensato. Dato che gli utenti di Windows XP non possono eseguire l'aggiornamento a IE8, allora è una buona idea che qualsiasi sito commerciale lo supporti.

Answer 5

L'unica cosa che ha funzionato per la mia situazione era quello di usare i CSS carta vetrata - una volta ho avuto che integrata, ho provato il seguente codice CSS ...

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
} 

e voilà! IE ha ruotato il testo verticalmente, leggendo dal basso verso l'alto. Tuttavia, in tutti gli altri browser, questo orientamento è considerato di 270 gradi.

ora avevo altri browser che ruotano il testo in un angolo diverso da IE, come se il sistema di coordinate IE è back-to-front (non sarei sorpreso ...)

ho pensato' d provare un commento condizionale per servire la regola -sand-transform solo per i browser IE. Per qualsiasi ragione, IE ha ignorato questo e quindi la rotazione non è stata applicata (IE10 ignora i commenti condizionali?)

Così ora ho avuto il problema di far sì che tutti i browser facessero lo stesso. Riorganizzando l'ordine delle regole e impostando 180 gradi per IE e 270 gradi per gli altri, ho finalmente avuto una regola CSS che ha funzionato per ruotare il testo verticalmente, leggendo bottom-to-top, in Firefox, Chrome, Safari e IE!

#vertbar p.name { 
    -sand-transform: rotate(180deg); 
    -webkit-transform: rotate(270deg) !important; 
    -moz-transform: rotate(270deg) !important; 
    -o-transform: rotate(270deg) !important; 

    font-size: 14px; 
    text-transform: capitalize; 
    display: block; 
    white-space: nowrap; 
    height: 330px; 
    text-align: left; 
    color: #FFF; 
    line-height: 40px; 
    margin-top: 0px; 
} 

Evviva! Spero che questo sia di aiuto a qualcuno, ho perso più di 2 ore cercando di ottenere questo risultato. : P

Aggiornamento: volevo solo fare una correzione - 270 gradi è 270 gradi in tutti i browser. Ho scoperto che avevo un'altra regola con una rotazione di 90 gradi, che veniva aggiunta a una seconda regola di 180 gradi, per dare un totale di 270. Quindi è stato interessante notare che il valore di rotazione è relativo (aggiuntivo?) Piuttosto che assoluto.

Answer 6

Questo funziona per IE:

-ms-transform: rotate(-20deg);