仅使用 CSS 的 IE7、IE8、IE9 和 IE10 中的垂直文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17286651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical text in IE7, IE8, IE9, and IE10 with CSS only
提问by JacobMcLock
Does anyone know how to successfully implement vertical text in IE7, IE8, IE9, and IE10 with CSS only? (by vertical text, I'm referring to text being rotated counterclockwise 90 degrees)
有谁知道如何仅使用 CSS 在 IE7、IE8、IE9 和 IE10 中成功实现竖排文本？（垂直文本，我指的是逆时针旋转 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 "" CSS hack so that other browsers will ignore these lines */
zoom: 1;
writing-mode: tb-rl;
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. A useful solution would be a way to do vertical text in IE8 and below that will not be picked up by IE10. I really want to avoid having an IE8-only stylesheet, or having a media query to detect IE10. I'm just looking for a way to modify the CSS above to have vertical text in all browsers. Thank you!
然而，IE10 并没有忽略 "\9" CSS hack——它会选择这些值并将文本再旋转 90 度。一个有用的解决方案是在 IE8 及更低版本中处理垂直文本，而 IE10 则不会。我真的想避免使用仅限 IE8 的样式表，或使用媒体查询来检测 IE10。我只是在寻找一种方法来修改上面的 CSS 以在所有浏览器中都有垂直文本。谢谢！
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.
我仍然没有找到一种方法来使用 IE10 和 IE8 满意的纯 CSS。
回答by obenjiro
Here is pure CSS ( + 1 extra div for every text ) solution
这是纯 CSS（每个文本 + 1 个额外 div）解决方案
Works for all IE versions IE7-10
适用于所有 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 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>
回答by G-Cyrillus
You should use conditionnal comment for older IEs .
That what they are meant for and it will do no hurts nor hack (ing head)s :)
您应该对较旧的 IE 使用条件注释。
它们的用途是什么，它不会伤害也不会破解（ing head）s :)
回答by Harry
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);
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;
}
