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 旋转文本 - 复杂

尝试如下

<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没有布局，所以你必须添加position: absolute或标记display: blockspan

检查这个Fiddle1，这是你的fiddle2

更新： 对于旧版本的 IE

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

Answer 2

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

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