Question

如何在IE 8及更低版本中旋转90度，仅使用CSS？

.horizontal {
   display: block;
   width: 300px;
   height: 100px;/*height*/
   background: #FF0000;
   margin: auto;
   margin-top: 110px;
   text-align: center;
   border: 5px solid #000000;

   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   -ms-transform: rotate(-90deg);
   transform: rotate(-90deg);
}

Answer 1

您想使用filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

<强> CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

<强> More information on this

Answer 2

当前在CSS3草案规范中的

writing-mode 允许我们在不使用专有属性的情况下完成文本轮换，有效地将来证明这一概念，因为更多浏览器采用CSS3草案规范。

p { writing-mode: tb-rl; }

这是非常简单的CSS技术，最终将适用于所有浏览器，因为他们的CSS3支持变得更好。这是IE中少数支持CSS3的属性之一。 tb-rl值告诉浏览器显示段落，文本从上到下，从右到左流动。基本上将文本顺时针旋转90度并向右对齐。

此属性的真实意图是以正确的“书写模式”显示其他语言，例如从右到左的日语或阿拉伯语＆amp;从右到左显示的希伯来语＆amp;从上到下（rl-tb）。

<强>支持

目前，IE是IE5.5及以上版本中唯一支持它的浏览器，IE8通过使用-ms扩展名添加了更多值。 IE5.5 +有4个值，IE8 +通过-ms扩展有4个值。

lr-tb - 这是默认值，从左到右，从上到下
rl-tb - 这将文本从右向左流动，从上到下
tb-rl - 从上到下，从右到左垂直流动文本
bt-rl - 从下到上，从右到左
tb-lr - 此值和以下值仅在IE8 +中使用-ms-writing-mode。文字从上到下，从左到右流动
bt-lr - 从下到上，从左到右
lr-bt - 从左到右，从下到上
rl-bt - 从右到左，从下到上

在其他浏览器中旋转文字？

-webkit-transform: rotate(90deg);   
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);

Online Demo

-ms-writing-mode property

在IE8和CSS中旋转90度

2 个答案: