Html 使用 CSS 和 IE 旋转文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9051030/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating text with CSS and IE
提问by Felipe Ignacio Victoriano Vict
I need to rotate text with CSS. I have the following style rules but they do not appear to work in Internet Explorer.
我需要用 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;
}
How can I rotate text in IE with CSS?
如何使用 CSS 在 IE 中旋转文本？
回答by lpd
Below IE9, Internet Explorer has effectively zero inbuilt support for CSS3 or any other standardweb 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:
在 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 */
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-filterCSS rule for you: Matrix Calculator.
如果您真的需要达到示例中包含的 340/-20 度，那么您将需要尝试一些更困难的事情，记录在此处：MSDN Matrix Filter。考虑到它看起来有多么复杂，快速的谷歌搜索显示了一个很好的计算器，它会-ms-filter为你生成一个CSS 规则：矩阵计算器。
Bear in mind that both of these features are meant to be deprecated in IE9 which I believe supports -ms-transforminstead. Depending on whether Microsoft defines deprecated as removed or advised against you may want to check that IE9 isn't rotating your text twice.
请记住，这两个功能都意味着在 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;
}
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.
老实说，如果您打算使用 HTML5 和/或 CSS3，那么我会同意 Duopixel 的回答，即通过 javascript 包含一个 CSS3 库是明智的。鉴于 Windows XP 用户无法升级到 IE8 以上，那么任何商业站点都支持它是一个好主意。
回答by Vee
The only thing that worked for my situation was to use CSS Sandpaper - once I had that integrated, I tried the following CSS code...
唯一对我的情况有效的是使用 CSS Sandpaper - 一旦我集成了它，我尝试了以下 CSS 代码......
#vertbar p.name {
-sand-transform: rotate(180deg);
}
and voila! IE rotated the text vertically, reading from bottom-to-top. However, in all other browsers, this orientation is considered 270 degrees.
瞧！IE 垂直旋转文本，从下到上阅读。但是，在所有其他浏览器中，此方向被视为 270 度。
I now had other browsers rotating the text at a different angle to IE, as if the IE coordinate system is back-to-front (I wouldn't be surprised...)
我现在让其他浏览器以与 IE 不同的角度旋转文本，好像 IE 坐标系是从后到前的（我不会感到惊讶......）
I thought I'd try a conditional comment to serve the -sand-transformrule to IE browsers only. For whatever reason, IE ignored this and so the rotation wasn't even applied (does IE10 ignore conditional comments?)
我想我会尝试使用条件注释来为-sand-transformIE 浏览器提供规则。无论出于何种原因，IE 忽略了这一点，因此甚至没有应用旋转（IE10 是否忽略条件注释？）
So now I had the problem of getting all browsers to do it the same. Rearranging the order of the rules and setting 180 degrees for IE and 270 degrees for the others, I finally had a CSS rule that worked to rotate the text vertically, reading bottom-to-top, in Firefox, Chrome, Safari and IE!
所以现在我遇到了让所有浏览器都这样做的问题。重新排列规则的顺序并为 IE 设置 180 度，为其他设置 270 度，我终于有了一个 CSS 规则，可以在 Firefox、Chrome、Safari 和 IE 中垂直旋转文本，从下到上阅读！
#vertbar p.name {
-sand-transform: rotate(180deg);
-webkit-transform: rotate(270deg) !important;
-moz-transform: rotate(270deg) !important;
-o-transform: rotate(270deg) !important;
font-size: 14px;
text-transform: capitalize;
display: block;
white-space: nowrap;
height: 330px;
text-align: left;
color: #FFF;
line-height: 40px;
margin-top: 0px;
}
Hurray! Hopefully this is of help to someone, I wasted over 2 hours trying to get this sorted. :P
欢呼！希望这对某人有帮助，我浪费了 2 多个小时试图解决这个问题。:P
Update: Just wanted to make a correction - 270 degrees is 270 degrees in all browsers. I discovered that I had another rule with a rotation of 90 degrees, which was being added to a second rule of 180 degrees, to give a total of 270. So it was interesting to note the rotation value is relative (additional?) rather than absolute.
更新：只是想进行更正 - 270 度在所有浏览器中都是 270 度。我发现我有另一个旋转 90 度的规则，它被添加到第二个 180 度的规则中，总共是 270。所以有趣的是注意到旋转值是相对的（附加的？）而不是绝对。
回答by methodofaction
To get this working in IE < 9 you would need to use CSS Sand paper, which is a polyfill for CSS transformations: http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
要在 IE < 9 中使用它，您需要使用 CSS Sand paper，这是用于 CSS 转换的 polyfill：http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/
回答by Vincenzo Lo Palo
This works for IE:
这适用于 IE：
-ms-transform: rotate(-20deg);
回答by Shadow_boi
Older versions of IE ( 8 and below ) do not support CSS3
旧版本的 IE（8 及以下）不支持 CSS3
回答by Sam152
IE doesn't support some features of CSS3.The solution: let it degrade gracefully in IE and let people with a modern browser enjoy modern websites.
IE 不支持 CSS3 的一些特性。解决办法：让它在 IE 中优雅地降级，让拥有现代浏览器的人享受现代网站。
