使用CSS和IE旋转文本

Question

我需要用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中旋转文本？

Answer 1

在IE9下面,Internet Explorer实际上没有内置支持CSS3或任何其他标准 Web技术(如SVG),允许您根据需要旋转文本跨平台.自IE6以来,Microsoft已经包含了两种旋转元素(例如文本)的方法,但是更简单的方法只能在90度的增量下工作,如下所示:

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

如果您确实需要达到示例中包含的340/-20度,那么您将需要尝试更难的事情,请在此处记录:MSDN矩阵过滤器.鉴于外观看起来有多么复杂,快速谷歌搜索显示了一个很好的计算器,可以-ms-filter为你生成一个CSS规则:矩阵计算器.

请记住,这两个功能都是在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升级,因此任何商业网站都支持它.

Answer 2

旧版本的 IE（8 及以下）不支持 CSS3