IE8旋转过滤器旋转div而不是文本

Question

我目前正在尝试在所有浏览器上旋转文字。 IE8 +。我为所有其他浏览器设置了变换，但是当谈到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标签已旋转，但文本保持水平：

我一直在嘲笑这一段时间，似乎无法弄清楚为什么它不会旋转。我现在并不担心旋转位置，我只是想让它旋转。有什么想法有什么不对？ 谢谢。

Answer 1

对于较旧的IE，您应该照看writing-mode来旋转整个框：）

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

Answer 2

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

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

从理论上讲，这意味着it would end up being upside-down, but we're dealing with IE's activeX滤镜样式在这里，并且当你将它们组合起来时它们会被夸大，所以我可以理解为什么它会显示未旋转的文本。

如果你在旧的IE中做了很多旋转的东西，你可能也想知道CSS Sandpaper library。这是一个小的Javascript polyfill lib，它为旧的IE版本添加了对（近）标准transform CSS的支持。使用它可以简化生活很多，因为您可以对所有浏览器使用相同的语法，而不必担心丑陋的filter样式。

Answer 3

你在当地工作吗？ Internet Explorer的过滤器仅在线工作。