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

Question

有没有人知道如何用CSS只在IE7,IE8,IE9和IE10中成功实现垂直文本？(通过垂直文本,我指的是文本逆时针旋转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,在所有浏览器中都有垂直文本.谢谢!

编辑:

为了它的价值,我还尝试了下面的代码,它使用过滤器来旋转文本.这可能适用于大多数情况,但在我的实例中,许多文本被包装元素的受限(非旋转？)约束切断.

.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很高兴.

Answer 1

这是纯CSS(每个文本+ 1个额外的div)解决方案

适用于IE7-10的所有IE版本

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

Answer 2

对于较旧的 IE，您应该使用条件注释。
这就是它们的用途，并且不会造成任何伤害，也不会破坏（ing head）：）