1

我目前正在尝试在所有浏览器上旋转文本，包括。即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 标签被旋转，但文本保持水平： http://f.cl.ly/items/1h3w2I1A2M3e3b1Z1B0a/rotate.jpg

我已经对此进行了一段时间的研究，似乎无法弄清楚它为什么不旋转。我现在并不担心旋转位置，我只是想让它旋转。有什么想法有什么问题吗？谢谢。

4

3 回答 3

3

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

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

于 2013-07-18T14:51:06.783 回答
1

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

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

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

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

于 2013-07-18T14:56:00.823 回答
-1

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

于 2013-11-29T09:30:15.140 回答