IE8旋转过滤器旋转div但不是文字

我目前正试图旋转包括所有浏览器上的文本。 IE8 +。我已经为所有其他浏览器设置了转换，但是当涉及到IE8时，我只能让该框旋转，文本不会随之旋转。IE8旋转过滤器旋转div但不是文字

在这里看到： 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 /段落标记旋转，但文本保持水平：

我一直戳掉在这一段时间，似乎无法找出为什么不旋转。我现在不担心旋转位置，我只是想让它旋转。任何想法有什么不对？谢谢。

来源

2013-07-18 MoDFoX

为什么在IE8特定的CSS中同时旋转'.rotated'和'.container'？ –

这是更多的看看是否只有一个旋转是我的问题。除了测试目的，我没有真正的理由去做这件事。 – MoDFoX

老年人IE浏览器，你应该看看writing-mode后转动整个盒子:)

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

来源

2013-07-18 14:51:06

哦！那很容易，而且似乎很适合我的目的。谢谢！我会尽可能地回答。 – MoDFoX

无论如何，只要告诉我们，如果它做到了;） –

确实有效。谢谢。 – MoDFoX

你的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的支持。使用这种方式可以让生活更容易lot，因为您可以对所有浏览器使用相同的语法，而不必担心丑陋的filter样式。

来源

2013-07-18 14:56:00 Spudley

-1

你在当地工作吗？ Internet Explorer的筛选器只能在线工作。

来源

2013-11-29 09:30:15

IE8旋转过滤器旋转div但不是文字

回答

相关问题