Vertikaler Text in IE7, IE8, IE9 und IE10 mit nur CSS

Question

Kann jemand vertikalen Text in IE7, IE8, IE9 und IE10 mit CSS nur erfolgreich implementieren? (Durch vertikalen Text, beziehe ich mich gegen den Uhrzeigersinn um 90 Grad in Text gedreht wurde)

Das ist, was ich heute umgesetzt habe, was ich denke, sollte korrekt sein:

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

} 

ist jedoch IE10 nicht ignorieren "\ 9" CSS-Hack - es wird diese Werte aufnehmen und den Text um weitere 90 Grad drehen. Eine nützliche Lösung wäre eine Möglichkeit, vertikalen Text in IE8 und darunter zu erstellen, der von IE10 nicht erfasst wird. Ich möchte wirklich vermeiden, ein Stylesheet nur IE8 zu haben oder eine Medienabfrage zu haben, um IE10 zu entdecken. Ich bin nur auf der Suche nach einer Möglichkeit, das CSS oben zu ändern, um vertikalen Text in allen Browsern zu haben. Vielen Dank!

EDIT:

Für was es wert ist, ich habe auch versucht, den Code unten, dass ein Filter verwendet den Text zu drehen. Dies funktioniert in den meisten Fällen, aber in meinem Fall wird ein großer Teil des Textes durch die eingeschränkten (nicht gedrehten?) Beschränkungen des Umhüllungselements abgeschnitten.

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

} 

Ich habe immer noch keinen Weg gefunden, dies mit reinem CSS zu tun, wo IE10 und IE8 glücklich sind.

Answer 1

Sie sollten bedingten Kommentar für ältere IEs verwenden.
Das, was sie gemeint sind, und es wird tun nicht noch Hack (ing Kopf) s :)

Answer 2

Hier ist reine CSS (+ 1 Zusatz div für jeden Text) Lösung

Works für alle verletzt IE-Versionen IE7-10

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

Answer 3

das gleiche Problem, aber mit zusätzlicher schlechter Lesbarkeit des gedrehten Textes, würde ich empfehle nicht zu verwenden:

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

für IE9 oder IE 8.

Das ist, was für mich gearbeitet:

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

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