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
Vous devez vous connecter pour publier un commentaire.
Ici est pure CSS ( + 1 supplémentaire div pour chaque texte ) solution
Fonctionne pour toutes les versions IE IE7-10
https://gist.github.com/aiboy/7406727
Vous devriez utiliser le conditionnel commentaire pour les anciens S .
Que ce qu'ils sont fait l'un pour et il ne fera pas de mal ni de hack (ing chef) s 🙂
Avoir le même problème, mais avec une mauvaise lisibilité du texte pivoté, je conseillerais de ne pas utiliser le:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
pour IE9 ou IE 8.
Qui est, ce qui a fonctionné pour moi:
de http://scottgale.com/css-vertical-text/2010/03/01/