仅限CSS的IE7，IE8，IE9和IE10中的垂直文本

Question

Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? 有没有人知道如何只用CSS在IE7，IE8，IE9和IE10中成功实现垂直文本？ (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees) （通过垂直文本，我指的是文本逆时针旋转90度）

This is what I have implemented today, which I think should be 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 "\9" CSS hack so that other browsers will ignore these lines */
zoom: 1\9;
writing-mode: tb-rl\9;
filter: flipv fliph;

}

However, IE10 is not ignoring the "\\9" CSS hack -- it will pick up those values and rotate the text another 90 degrees. 但是，IE10并没有忽略“\\ 9”CSS黑客攻击 - 它将获取这些值并将文本再旋转90度。 A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10. 一个有用的解决方案是在IE8及更低版本中执行垂直文本的方法，IE10不会选择它。 I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10. 我真的想避免使用仅IE8样式表，或者使用媒体查询来检测IE10。 I'm just looking for a way to modify the CSS above to have vertical text in all browsers. 我只是想找到一种方法来修改上面的CSS，在所有浏览器中都有垂直文本。 Thank you! 谢谢！

EDIT: 编辑：

For what it is worth, I also tried the code below that uses a filter to rotate the text. 为了它的价值，我还尝试了下面的代码，它使用过滤器来旋转文本。 This may work for most cases, but in my instance a lot of the text is cut off by the restricted (non-rotated?) constrains of the wrapping element. 这可能适用于大多数情况，但在我的实例中，许多文本被包装元素的受限（非旋转？）约束切断。

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

}

I still have not found a way to do this with pure CSS where IE10 and IE8 are happy. 我仍然没有找到一种方法来使用纯CSS，IE10和IE8很高兴。

Answer 1

Here is pure CSS ( + 1 extra div for every text ) solution 这是纯CSS（每个文本+ 1个额外的div）解决方案

Works for all IE versions IE7-10 适用于IE7-10的所有IE版本

/** 
 * 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 example 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>

source: https://gist.github.com/obenjiro/7406727 来源： https ： //gist.github.com/obenjiro/7406727

Answer 2

You should use conditionnal comment for older IEs . 您应该对旧的IE使用条件注释。
That what they are meant for and it will do no hurts nor hack (ing head) s :) 他们的意思是什么，它不会伤害也不会破坏（头脑） s :)

Answer 3

Having the same problem, but with additional bad readability of the rotated text, I would advice not to use the: 遇到同样的问题，但旋转文本的可读性更差，我建议不要使用：

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

for IE9 or IE 8. 对于IE9或IE 8。

That's, what worked for me: 那是什么，对我有用：

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

from http://scottgale.com/css-vertical-text/2010/03/01/ 来自http://scottgale.com/css-vertical-text/2010/03/01/

仅限CSS的IE7，IE8，IE9和IE10中的垂直文本

问题描述

3 个解决方案

解决方案1
6 2013-11-12 11:01:56

解决方案2
2 2013-06-25 01:47:43

解决方案3
0 2014-02-11 13:18:40

仅限CSS的IE7，IE8，IE9和IE10中的垂直文本

问题描述

3 个解决方案

解决方案1 6 2013-11-12 11:01:56

解决方案2 2 2013-06-25 01:47:43

解决方案3 0 2014-02-11 13:18:40

解决方案1
6 2013-11-12 11:01:56

解决方案2
2 2013-06-25 01:47:43

解决方案3
0 2014-02-11 13:18:40