html – 使用CSS和IE旋转文本

我需要用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升级,那么任何商业网站都支持它是个好主意.

原文地址：https://www.jb51.cc/html/224733.html