Някой знае ли как успешно да внедри вертикален текст в IE7, IE8, IE9 и IE10 само с CSS? (под вертикален текст имам предвид текст, който е завъртян обратно на часовниковата стрелка на 90 градуса)
Това е, което внедрих днес, което според мен трябва да е правилно:
.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;
}
Въпреки това, IE10 не игнорира "\9" CSS хака - той ще вземе тези стойности и ще завърти текста на още 90 градуса. Полезно решение би бил начин за създаване на вертикален текст в IE8 и по-долу, който няма да бъде приет от IE10. Наистина искам да избегна да имам таблица със стилове само за IE8 или да имам медийна заявка за откриване на IE10. Просто търся начин да модифицирам CSS-а по-горе, за да има вертикален текст във всички браузъри. Благодаря ти!
РЕДАКТИРАНЕ:
Колкото и да си струва, изпробвах и кода по-долу, който използва филтър за завъртане на текста. Това може да работи в повечето случаи, но в моя случай голяма част от текста е отрязана от ограничените (незавъртани?) ограничения на опаковъчния елемент.
.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;
}
Все още не съм намерил начин да направя това с чист CSS, където IE10 и IE8 са щастливи.
