blocks|key|5959003|text|较早版本的IE+(8及更低版本)不支持CSS3|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5959004|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Older versions of IE ( 8 and below ) do not support CSS3

blocks|key|2430988|text|IE不支持CSS3的一些功能。解决方案:让它在IE中优雅地降级，让拥有现代浏览器的人享受现代网站。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2430989|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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.

blocks|key|5959076|text|要让它在IE+<9中工作，你需要使用CSS+Sand+paper，这是一个用于CSS转换的polyfill：http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5959077|entityMap|0|LINK|mutability|MUTABLE|url|http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/^0|1I|20|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

To get this working in IE &lt; 9 you would need to use CSS Sand paper, which is a polyfill for CSS transformations: <a href="http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/" rel="nofollow">http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/</a>

blocks|key|4543165|text|在IE9下，Internet+Explorer实际上对CSS3或任何其他标准web技术的内置支持为零，这些技术允许您随心所欲地跨平台旋转文本。自从IE6以来，微软已经包含了两种旋转元素(例如文本)的方法，但是更简单的方法只在90度上递增工作，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4543166|-ms-filter:+"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";+/*+0=0,+1=90,+2=180,+3=270+*/|code-block|syntax|javascript|4543167|如果你真的需要达到你的例子中包含的340/-20度，那么你将需要尝试一些更困难的东西，在这里有记录：MSDN+Matrix+Filter。考虑到这看起来有多么不必要的复杂，在谷歌上快速搜索一下，就会发现一个很好的计算器，它会为你生成一个-ms-filter+CSS规则：Matrix+Calculator。|offset|length|style|CODE|4543168|请记住，这两个特性在我认为支持-ms-transform的IE9中都是不推荐使用的。根据微软是否定义了弃用、删除或建议，您可能需要检查IE9是否没有将文本旋转两次。|4543169|.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%2B+*/
++++-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;
}|4543170|老实说，如果你打算使用HTML5和/或CSS3，那么我同意Duopixel的回答，即通过javascript包含一个CSS3库是明智的。鉴于Windows+XP的用户不能升级到IE8以上版本，那么任何商业网站都支持它是一个好主意。|4543171|entityMap|0|LINK|mutability|MUTABLE|url|http://msdn.microsoft.com/en-us/library/ms533014%2528VS.85%2529.aspx|1|http://www.boogdesign.com/examples/transforms/matrix-calculator.html^0|0|0|3A|A|1E|I|0|3R|H|1|0|F|D|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@$I|15|J|16|K|L]]|9|@$I|17|J|18|1|19]|$I|1A|J|1B|1|1C]]|A|$]]|$1|M|3|N|5|6|7|1D|8|@$I|1E|J|1F|K|L]]|9|@]|A|$]]|$1|O|3|P|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1I|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

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:

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

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: <a href="http://msdn.microsoft.com/en-us/library/ms533014%28VS.85%29.aspx" rel="noreferrer">MSDN Matrix Filter</a>. Given how unnecessarily complex that looks, a quick Google search revealed a nice calculator that will generate an <code>-ms-filter</code> CSS rule for you: <a href="http://www.boogdesign.com/examples/transforms/matrix-calculator.html" rel="noreferrer">Matrix Calculator</a>.

Bear in mind that both of these features are meant to be deprecated in IE9 which I believe supports <code>-ms-transform</code> 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.

<pre><code>.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 &amp; Chrome */
 transform: rotate(-20deg);
 font-size:40px;
 display:block;
 float: left;
 margin: 0 10px 0 0;
}
</code></pre>

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.

blocks|key|2431122|text|对于我的情况，唯一有效的方法是使用CSS砂纸-一旦我集成了它，我尝试了以下CSS代码……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2431123|#vertbar+p.name+{
++++-sand-transform:+rotate(180deg);
}|code-block|syntax|javascript|2431124|瞧！IE垂直旋转文本，从下到上阅读。但是，在所有其他浏览器中，此方向被认为是270度。|2431125|我现在让其他浏览器以不同的角度旋转文本到IE，就好像IE坐标系是从后到前一样(我不会感到惊讶……)|2431126|我想我应该尝试一个条件注释，以便只为IE浏览器提供-sand-transform规则。无论出于什么原因，IE都忽略了这一点，因此甚至没有应用旋转(+IE10是否忽略条件注释？)|offset|length|style|CODE|2431127|所以现在我遇到了让所有浏览器都这么做的问题。重新排列规则的顺序，并将IE设置为180度，其他设置为270度，我终于有了一个CSS规则，它可以在Firefox、Chrome、Safari和IE中垂直旋转文本，从下到上阅读！|2431128|#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;
}|2431129|万岁！希望这对某些人有帮助，我浪费了2个多小时来解决这个问题。:P|2431130|更新:我只是想做个修正--+270度在所有浏览器中都是270度。我发现我有另一个旋转90度的规则，它被添加到第二个180度的规则中，得出总共270度。因此值得注意的是，旋转值是相对的(附加？)而不是绝对的。|2431131|entityMap^0|0|0|0|0|P|F|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|17|8|@]|9|@]|A|$]]|$1|S|3|T|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

The only thing that worked for my situation was to use CSS Sandpaper - once I had that integrated, I tried the following CSS code... 

<pre><code>#vertbar p.name {
 -sand-transform: rotate(180deg);
}
</code></pre>

and voila! IE rotated the text vertically, reading from bottom-to-top. However, in all other browsers, this orientation is considered 270 degrees.

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...)

I thought I'd try a conditional comment to serve the <code>-sand-transform</code> rule to IE browsers only. For whatever reason, IE ignored this and so the rotation wasn't even applied (does IE10 ignore conditional comments?)

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! 

<pre><code>#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;
}
</code></pre>

Hurray! Hopefully this is of help to someone, I wasted over 2 hours trying to get this sorted. :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.

blocks|key|2431151|text|这适用于IE：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2431152|-ms-transform:+rotate(-20deg);|code-block|syntax|javascript|2431153|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This works for IE:

<pre><code>-ms-transform: rotate(-20deg);
</code></pre>

I need to rotate text with CSS. I have the following style rules but they do not appear to work in Internet Explorer.

<pre><code>.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;
}
</code></pre>

How can I rotate text in IE with CSS?

Rotating text with CSS and IE

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要用CSS旋转文本。我有以下样式规则，但它们在Internet Explorer中似乎不起作用。.footer #descr span {    -moz-transform: rotate(-20deg);  /* Firefox */    -o-transform: rotate(-20deg);  /* O...

问使用CSS和IE旋转文本
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用CSS和IE旋转文本EN