使用 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);

Answer 2

这是 css 代码 - 您应该将其添加到 <style></style> 标记或 style 属性：

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