IE8旋转过滤器旋转div但不是文本答案

【问题标题】：IE8 rotate filter rotates div but not textIE8旋转过滤器旋转div但不是文本
【发布时间】：2013-11-29 17:30:15
【问题描述】：

我目前正在尝试在所有浏览器上旋转文本，包括。即8+。我已经为所有其他浏览器设置了我的转换，但是对于 IE8，我只能让框旋转，文本不会随之旋转。

请看这里： https://dl.dropboxusercontent.com/u/106547/rotate/rotate.html

标记：

<div id='container' class='container'>
<p class='rotated'>
My view has been loaded
</p>
text
</div>

风格：常规 -

.rotated{
        display: block;
        position: relative;

        /* Safari */
        -webkit-transform: rotate(-90deg);

        /* Firefox */
        -moz-transform: rotate(-90deg);

        /* IE */
        -ms-transform: rotate(-90deg);

        /* Opera */
        -o-transform: rotate(-90deg);

        transform: rotate(-90deg);



    }

和 IE8 条件

<!--[if lt IE 9]>
<style type="text/css">
.rotated, .container{
    zoom:1;
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->

正如您在此处看到的，div/paragraph 标签被旋转，但文本保持水平：

我一直在研究这个问题，但似乎无法弄清楚它为什么不旋转。我现在并不担心旋转位置，我只是想让它旋转。有什么想法有什么问题吗？谢谢。

【问题讨论】：

为什么在 IE8 特定的 CSS 中同时旋转 .rotated 和 .container？
更多的是看看是否只旋转一个是我的问题。除了测试目的之外，我没有真正的理由这样做。

标签： html css internet-explorer-8

【解决方案1】：

对于较旧的 IE，您应该注意 writing-mode 以旋转整个框:)

http://msdn.microsoft.com/en-us/library/ie/ms531187%28v=vs.85%29.aspx

【讨论】：

哦！嗯，这很容易，而且似乎很适合我的目的。谢谢！一旦可以，将标记为已回答。
随便，只要告诉我们它是否做到了；）

【解决方案2】：

您的 IE8 样式使用以下选择器 .rotated, .container，而您的普通样式仅旋转 .rotated。

这可能是问题的根本原因：IE8 样式告诉浏览器尝试旋转container 和rotated 元素。由于一个在另一个内部，这意味着它将尝试旋转内部元素两次。

理论上，这意味着 it would end up being upside-down, but we're dealing with IE's activeXfilter` 样式在这里，并且当您将它们组合在一起时它们会爆炸，所以鉴于我可以理解为什么它会显示未旋转的文本。

如果您在旧 IE 中进行大量旋转操作，您可能还想了解CSS Sandpaper library。这是一个小的 Javascript polyfill 库，它为旧的 IE 版本添加了对（接近）标准 transform CSS 的支持。使用它会使生活变得更轻松很多，因为您可以对所有浏览器使用相同的语法，而不必担心丑陋的 filter 样式。

【讨论】：

【解决方案3】：

您在本地工作吗？ Internet Explorer 的过滤器只能在线工作。

【讨论】：