Tekst pionowy w IE7, IE8, IE9 i IE10 tylko z CSS

Question

Czy ktoś wie, jak z powodzeniem implementować tekst pionowy w IE7, IE8, IE9 i IE10 tylko z CSS? (Według tekstu pionowego, mam na myśli tych tekstów jest obrócona w lewo o 90 stopni)

To właśnie wdrożyliśmy dzisiaj, co moim zdaniem powinny być poprawne:

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

} 

Jednak IE10 nie jest ignorowanie "\ 9" Hack CSS - podniesie te wartości i obróci tekst o kolejne 90 stopni. Przydatnym rozwiązaniem byłby sposób na pionowy tekst w IE8 i poniżej, który nie zostanie odebrany przez IE10. Naprawdę chcę uniknąć posiadania arkusza stylów tylko dla IE8 lub mieć zapytanie o media, aby wykryć IE10. Po prostu szukam sposobu modyfikacji powyższego CSS, aby uzyskać tekst w pionie we wszystkich przeglądarkach. Dziękuję Ci!

EDIT:

Na co warto, próbowałem też poniższy kod, który wykorzystuje filtr obrócić tekst. Może to działać w większości przypadków, ale w moim przypadku duża część tekstu jest obcięta przez ograniczone (nieobrócone?) Ograniczenia elementu owijającego.

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

} 

Nadal nie znaleźli sposób, aby to zrobić z czystym CSS gdzie IE10 i IE8 są zadowoleni.

Answer 1

Powinieneś używać warunkowego komentarza dla starszych IE.
że to, co mają do zrobienia i to nie boli ani siekać głowy (ing) s :)

Answer 2

Oto czysty CSS (+ 1 dodatkowy div dla każdego tekstu) rozwiązanie

działa dla wszystkich wersje IE IE7-10

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

Answer 3

ten sam problem, ale z dodatkowym złej czytelności tekstu obróconego, radziłbym nie używać:

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

dla IE9 lub IE 8.

to, co pracował dla mnie:

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

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