Texte vertical dans IE7, IE8, IE9 et IE10 avec CSS uniquement

Personne ne sait comment les mettre en œuvre avec succès le texte vertical dans IE7, IE8, IE9 et IE10 avec CSS? (texte vertical, je fais référence à un texte d'être tourné de 90 degrés dans le sens antihoraire)

C'est ce que j'ai mis en œuvre aujourd'hui, qui je pense, devrait être correct:

.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 "" CSS hack so that other browsers will ignore these lines */
zoom: 1;
writing-mode: tb-rl;
filter: flipv fliph;

}

Cependant, IE10 n'est pas en ignorant le "\9" CSS hack -- il sera ramasser ces valeurs et faire pivoter le texte d'un autre de 90 degrés. Une solution intéressante serait un moyen de faire un texte vertical dans IE8 et ci-dessous qui ne seront pas repris par d'IE10. Je veux vraiment éviter d'avoir une IE8 seule feuille de style, ou d'avoir un media query pour détecter IE10. Je suis à la recherche d'un moyen de modifier le CSS ci-dessus pour le texte vertical dans tous les navigateurs. Merci!!!!

EDIT:

Pour ce qu'il vaut, j'ai aussi essayé le code ci-dessous qui utilise un filtre pour faire pivoter le texte. Cela peut fonctionner pour la plupart des cas, mais dans mon cas la plupart du texte est coupé par l'restreint (non-rotation?) limite de l'élément d'habillage.

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

}

Je n'ai pas encore trouvé le moyen de le faire avec de la pure CSS où IE10 et IE8 sont heureux.

source d'informationauteur JacobMcLock