html – 使用CSS和IE旋转文本

概述我需要用CSS旋转文本.我有以下风格规则,但它们在Internet Explorer中似乎不起作用. .footer #descr span { -moz-transform: rotate(-20deg); /* Firefox */ -o-transform: rotate(-20deg); /* Opera */ -webkit-transform: rotate 我需要用CSS旋转文本.我有以下风格规则,但它们在Internet Explorer中似乎不起作用.

.footer #descr span {    -moz-transform: rotate(-20deg);  /* firefox */    -o-transform: rotate(-20deg);  /* Opera */    -webkit-transform: rotate(-20deg);  /* Safari y Chrome */    transform: rotate(-20deg);  /* Safari y Chrome */    Font-size:40px;    display:block;    float: left;    margin: 0 10px 0 0;}

如何使用CSS在IE中旋转文本？

解决方法 IE9以下,Internet Explorer对CSS3或任何其他标准Web技术(如SVG)的内置支持实际上是零,可以让您按需要旋转文本跨平台.微软自ie6以来已经包含了两种旋转元素(例如文本)的方法,但是更简单的方法只能以90度的增量运行,如下所示：

-ms-filter: "progID:DXImagetransform.Microsoft.BasicImage(rotation=3)"; /* 0=0,1=90,2=180,3=270 */

如果您确实需要达到340 / -20度,那么您将需要尝试一些比较困难的手段：MSDN Matrix Filter.鉴于这种不寻常的复杂性,Google快速搜索显示了一个不错的计算器这将为您生成一个-ms-filter CSS规则：Matrix Calculator.

请记住,这两个功能意味着在IE9中被弃用,我相信它支持-ms-transform.取决于Microsoft定义已弃用为已删除还是针对您的建议,您可能需要检查IE9是否不会旋转文本两次.

.footer #descr span {    -ms-filter: "progID:DXImagetransform.Microsoft.Matrix(M11=0.93969262,M12=0.34202014,M21=-0.34202014,M22=0.93969262,sizingMethod='auto expand')"; /* ie6-8 */    -ms-transform: rotate(-20deg); /* IE9+ */    -moz-transform: rotate(-20deg);  /* firefox */    -o-transform: rotate(-20deg);  /* Opera */    -webkit-transform: rotate(-20deg);  /* Safari & Chrome */    transform: rotate(-20deg);    Font-size:40px;    display:block;    float: left;    margin: 0 10px 0 0;}

尽管如此,如果您打算使用HTML5和/或CSS3,那么我同意Duopixel的解答,包括通过JavaScript的CSS3库将是明智的.给予windows XP的用户无法通过ie8升级,那么任何商业网站都支持它是个好主意.

总结

以上是内存溢出为你收集整理的html – 使用CSS和IE旋转文本全部内容，希望文章能够帮你解决html – 使用CSS和IE旋转文本所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。