html - 使用 jquery 旋转 Span 文本

Question

我想使用 jquery 旋转跨度文本。

<DIV id=container_vml_YAxisTitle_1>
<SPAN style="FONT-SIZE: 14px; FONT-FAMILY: Segoe UI; POSITION: absolute; ZOOM: 1; COLOR: #707070; LEFT: -64px; FILTER: alpha(opacity=100); TOP: 234px; VISIBILITY: visible">Sales Amount in millions(USD)
</SPAN>
</DIV>

我引用了以下用于旋转文本的链接，但它没有按预期工作。

CSS rotate text - complicated

尝试如下

<SPAN style="FONT-SIZE: 14px; -ms-transform:rotate(-90deg);   FONT-FAMILY: Segoe UI; POSITION: absolute; ZOOM: 1; COLOR: #707070; LEFT: -64px;  TOP: 234px; VISIBILITY: visible">Sales Amount in millions(USD)
</SPAN>

但在 IE7 和 IE8 浏览器中不工作，在其他浏览器中工作正常。

我正在使用 IE7 和 IE8 浏览器。使用 jquery 1.7.1。

谢谢，

湿婆

Answer 1

1) 你必须使用 : 而不是 =

-ms-transform:rotate(-90deg)

2) 你应该在 style 属性下给它

<span  style="-ms-transform:rotate(-90deg); position: absolute">SPAN</span>

3) span doesn't have layout , 所以你必须添加 position: absolute 或 display: block 到 span标记

检查这个Fiddle1这是你的 fiddle2

更新:对于旧版本的 IE

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);