Вертикальный текст в IE7, IE8, IE9 и IE10 только с CSS
Кто-нибудь знает, как успешно реализовать вертикальный текст в 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 не игнорирует CSS-хак "\9" - он подхватит эти значения и повернет текст еще на 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 счастливы.
3 ответа
Вот чистое решение CSS ( + 1 дополнительный div для каждого текста)
Работает для всех версий IE IE7-10
Вы должны использовать условный комментарий для старых IE.
Это то, для чего они предназначены, и это не принесет ни вреда, ни хака.
Имея ту же проблему, но с дополнительной плохой читаемостью повернутого текста, я бы посоветовал не использовать:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
для IE9 или IE 8.
Вот что сработало для меня:
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;
}