Question

我想使用jquery旋转span文本。

<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>

使用jquery旋转Span文本

2 个答案: