Testo verticale in IE7, IE8, IE9 e IE10 solo con CSS

Question

Qualcuno sa come implementare correttamente il testo verticale in IE7, IE8, IE9 e IE10 solo con CSS? (Dal testo verticale, mi riferisco al testo essere ruotato in senso antiorario di 90 gradi)

Questo è quello che ho implementato oggi, che credo dovrebbe essere corretta:

.counterclockwise-text { 

/* Chrome/Safari */ 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 50% 50%; 

/* Firefox */ 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 50% 50%; 

/* IE9 */ 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 50% 50%; 

/* This should work for IE10 and other modern browsers that do not need vendor prefixes */ 
transform: rotate(-90deg); 
transform-origin: 50% 50%; 

/* IE8 or less - using the "\9" CSS hack so that other browsers will ignore these lines */ 
zoom: 1\9; 
writing-mode: tb-rl\9; 
filter: flipv fliph; 

} 

Tuttavia, IE10 non sta ignorando la "\ 9" Modifiche CSS: raccoglierà quei valori e ruoterà il testo di altri 90 gradi. Una soluzione utile sarebbe un modo per fare testo verticale in IE8 e sotto che non verrà raccolto da IE10. Voglio davvero evitare di avere un foglio di stile solo IE8, o di avere una query multimediale per rilevare IE10. Sto solo cercando un modo per modificare il CSS sopra per avere testo verticale in tutti i browser. Grazie!

EDIT:

Per quello che vale, ho anche provato il seguente codice che utilizza un filtro per ruotare il testo. Questo può funzionare per la maggior parte dei casi, ma nella mia istanza gran parte del testo è troncata dai vincoli ristretti (non ruotati?) Dell'elemento di wrapping.

.counterclockwise-text { 

/* Chrome/Safari */ 
-webkit-transform: rotate(-90deg); 
-webkit-transform-origin: 50% 50%; 

/* Firefox */ 
-moz-transform: rotate(-90deg); 
-moz-transform-origin: 50% 50%; 

/* IE9 */ 
-ms-transform: rotate(-90deg); 
-ms-transform-origin: 50% 50%; 

/* IE10 and other modern browsers that do not need vendor prefixes */ 
transform: rotate(-90deg); 
transform-origin: 50% 50%; 

/* IE8 */ 
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 

/* IE7 or less */ 
*zoom: 1; 
*writing-mode: tb-rl; 
*filter: flipv fliph; 

} 

non ho ancora trovato un modo per fare questo con CSS puro dove IE10 e IE8 sono felici.

Answer 1

È consigliabile utilizzare il commento condizionale per gli IE meno recenti.
che ciò che sono pensati per e lo farà non fa male né incidere (testa ing) s :)

Answer 2

Ecco puro CSS (+ 1 div extra per ogni testo) soluzione

funziona per tutti versioni di IE IE7-10

https://gist.github.com/aiboy/7406727

Answer 3

avendo lo stesso problema, ma con l'aggiunta di cattiva leggibilità del testo ruotato, io consiglio di non usare il:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

per IE9 o IE 8.

Ecco, che cosa ha funzionato per me:

p.css-vertical-text { 
    color:#333; 
    border:0px solid red; 
    writing-mode:tb-rl; 
    -webkit-transform:rotate(90deg); 
    -moz-transform:rotate(90deg); 
    -o-transform: rotate(90deg); 
    white-space:nowrap; 
    display:block; 
    bottom:0; 
    width:20px; 
    height:20px; 
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif; 
    font-size:24px; 
    font-weight:normal; 
    text-shadow: 0px 0px 1px #333; 
} 

da http://scottgale.com/css-vertical-text/2010/03/01/