5

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

.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);
}
4

2 回答 2

11

你想用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);
}

有关此的更多信息

于 2013-07-29T04:32:29.790 回答
2

当前在 CSS3 草案规范中的写作模式允许我们在不使用专有属性的情况下完成文本旋转，随着越来越多的浏览器采用 CSS3 草案规范，有效地验证了这个概念。

p { writing-mode: tb-rl; }

这就是令人难以置信的简单 CSS 技术，随着对 CSS3 的支持越来越好，它最终将适用于所有浏览器。这是 IE 中少数支持 CSS3 的属性之一。tb-rl 值告诉浏览器显示段落，文本从上到下，从右到左。基本上将文本顺时针旋转 90 度并向右对齐。

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

支持

目前 IE 是从 IE5.5 及更高版本开始支持它的唯一浏览器，IE8 通过使用 -ms 扩展名增加了更多价值。IE5.5+ 有 4 个值可用，IE8+ 可通过 -ms 扩展名额外提供 4 个值。

  • lr-tb - 这是默认值，从左到右，从上到下
  • rl-tb – 文本从右到左，从上到下流动
  • tb-rl – 从上到下，从右到左垂直排列文本
  • bt-rl - 从下到上，从右到左
  • tb-lr – 此值和以下值仅在使用 -ms-writing-mode 的 IE8+ 中可用。文本从上到下、从左到右排列
  • 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);

在线演示

-ms-writing-mode 属性

于 2014-06-24T07:35:12.960 回答