使用CSS和IE旋转文本 [英] Rotating text with CSS and IE

问题描述

我需要使用CSS旋转文本。我有以下样式规则，但它们在Internet Explorer中不起作用。

I need to rotate text with CSS. I have the following style rules but they do not appear to work in 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;
}

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

How can I rotate text in IE with CSS?

推荐答案

在IE9之下，Internet Explorer实际上没有内置支持CSS3或任何其他标准网络技术你可以根据需要旋转文本跨平台。从IE6开始，Microsoft已经包括了两种旋转元素（例如文本）的方法，但是更简单的方法只能以90度的增量工作，例如：

Below IE9, Internet Explorer has effectively zero inbuilt support for CSS3 or any other standard web technologies such as SVG that would allow you to rotate text cross platform as you wish. Microsoft have included two ways of rotating elements (eg text) since IE6, however the more simple method only works in increments on 90 degrees, like so:

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

真的需要达到340 / -20度你包括在你的例子，那么你将需要尝试你的手在更困难的，记录在这里： MSDN矩阵过滤器。考虑到看起来不必要的复杂性，快速的Google搜索显示一个不错的计算器，会为您生成 -ms-filter CSS规则：矩阵计算器。

If you really need to attain that 340/-20 degrees you included in your example then you will need to try your hand at something more difficult, documented here: MSDN Matrix Filter. Given how unnecessarily complex that looks, a quick Google search revealed a nice calculator that will generate an -ms-filter CSS rule for you: Matrix Calculator.

请记住，这两个功能都是为了在IE9中被弃用，我相信支持 -ms-transform 。取决于Microsoft是否定义已弃用为已删除或建议您可能需要检查IE9是否不会轮换您的文本两次。

Bear in mind that both of these features are meant to be deprecated in IE9 which I believe supports -ms-transform instead. Depending on whether Microsoft defines deprecated as removed or advised against you may want to check that IE9 isn't rotating your text twice.

.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，那么任何商业网站都支持它是一个好主意。

To be perfectly honest though, if you are intending to make use of HTML5 and/or CSS3 then I would agree with Duopixel's answer that including a CSS3 library via javascript would be sensible. Given users of Windows XP cannot upgrade past IE8 then it is a good idea for any commercial site to support it.

这篇关于使用CSS和IE旋转文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！