Вертикальный текст в 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 не игнорирует "\ 9" CSS-взлома - он подберет эти значения и повернет текст еще на 90 градусов. Полезным решением было бы сделать вертикальный текст в IE8 и ниже, который не будет поднят IE10. Я действительно хочу избежать использования таблицы стилей только для IE8 или иметь медиа-запрос для обнаружения IE10. Я просто ищу способ изменить CSS выше, чтобы иметь вертикальный текст во всех браузерах. Спасибо!

EDIT:

Для чего это стоит, я также попробовал следующий код, который использует фильтр для поворота текста. Это может работать в большинстве случаев, но в моем случае большая часть текста обрезается ограничениями (невращающимися?) Обертывающего элемента.

.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 счастливы.

Ответ 1

Вот чистый CSS (+ 1 дополнительный div для каждого текста) решение

Работает для всех версий IE IE7-10

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

Ответ 2

Вы должны использовать условный комментарий для старых IE.
Это то, для чего они предназначены, и не будет вреда и не взломать голову:)

Ответ 3

Имея ту же проблему, но с дополнительной плохой читабельностью повернутого текста, я бы посоветовал не использовать:

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

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