Вертикальный текст в 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 довольны.


css vertical-text internet-explorer-10
person JacobMcLock    schedule 24.06.2013    source источник

Ответы (3)


arrow_upward
7
arrow_downward

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

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

/** 
 * Works everywere ( IE7+, FF, Chrome, Safari, Opera )
 */
.rotated-text {
    display: inline-block;
    overflow: hidden;
    width: 1.5em;
}
.rotated-text__inner {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that doesn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}
.rotated-text__inner:before {
    content: "";
    float: left;
    margin-top: 100%;
}

/* mininless css that used just for this demo */
.container {
  float: left;
}

HTML-пример

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Easy</span></div>
  </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Normal</span></div>
     </div>
   <div class="container">
    <div class="rotated-text"><span class="rotated-text__inner">Hard</span></div>
</div>
</body>
</html>

источник: https://gist.github.com/obenjiro/7406727

person obenjiro    schedule 12.11.2013
comment
Работает хорошо. Я тестировал из IE5, IE7-IE11. - person JerryKur; 06.02.2014

arrow_upward
2
arrow_downward

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

person G-Cyrillus    schedule 25.06.2013
comment
Я понимаю, что условные комментарии могут быть лучшим решением в целом, но я попросил решение с использованием чистого CSS. - person JacobMcLock; 25.06.2013

arrow_upward
0
arrow_downward

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

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

для IE9 или IE8.

Это то, что сработало для меня:

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/

person Harry    schedule 11.02.2014