IE7，IE8，IE9和IE10中的垂直文本，仅包含CSS [英] Vertical text in IE7, IE8, IE9, and IE10 with CSS only
问题描述
有没有人知道如何成功实现垂直文本在IE7，IE8，IE9和IE10只有CSS？ （通过垂直文本，我指的是逆时针旋转90度的文本）
这是我今天实现的，我认为应该是正确的：
.counterclockwise-text {
/ * Chrome / Safari * /
-webkit-transform：旋转（-90度）;
-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和其他不需要厂商前缀的现代浏览器* /
transform：rotate（-90deg）;
transform-origin：50％50％;
/ * IE8或更少 - 使用\9CSS黑客，以便其他浏览器将忽略这些行* /
zoom：1 \9;
writing-mode：tb-rl\9;
filter：flipv fliph;但是，IE10不会忽略\9，因为IE10不能忽略\\\\\\\\\\\\\\\\\\' CSS hack - 它将拾取这些值并将文本旋转另一个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和其他不需要厂商前缀的现代浏览器* /
transform：rotate（-90deg）;
transform-origin：50％50％;
/ * IE8 * /
filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;
/ * IE7或更少* /
* zoom：1;
* writing-mode：tb-rl;
* filter：flipv fliph;
}
我还没有找到办法。
解决方案这里是纯CSS（每个文本都有+ 1个额外的div）解决方案
适用于所有IE版本IE7-10
https://gist.github.com/aiboy/7406727
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)
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. 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!
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.
解决方案 Here is pure CSS ( + 1 extra div for every text ) solution
Works for all IE versions IE7-10
https://gist.github.com/aiboy/7406727
这篇关于IE7，IE8，IE9和IE10中的垂直文本，仅包含CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
