Question

我正在创建一个幻灯片菜单，其中一个标签文本旋转了270度。适用于所有现代浏览器，包括Explorers 10 + 9。但是我想在旧的IE8和它中使它具有功能性。 IE7，所以在SO上添加了许多答案中推荐的过滤器定义，但它不起作用。使用IE开发人员工具切换到IE8浏览器（在IE8标准模式下）测试页面。

以下是jsfiddle + its preview。

CSS

.menu p.heading {
    position:absolute;
    right:-22px;
    top:3em;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    transform:rotate(-90deg);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

尝试在过滤器中添加/删除引号，将html5 doctype更改为xhtml，但似乎没有任何效果。有人可以给我一个关于如何为IE 8＆amp; 7？

然后还有一个附属问题：在分离的标签as shown here中将这两个特定于IE8的定义分开是否有任何优势？

<!--[if lte IE 8]>
<style type="text/css">
.rotation {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
<![endif]-->

感谢任何提示！

Answer 1

您的轮换似乎在IE8中有效。但是，旋转的项目位置不正确，因此当您第一次查看页面时，旋转的文本将脱离屏幕的边缘。它会在您悬停时显示，并且框会移动到视图中。

这是因为IE8的filter样式与标准CSS的旋转点不同。它使用左上角作为旋转点，而CSS默认为中心。您需要修改其中一个或另一个，以便它们使用相同的点。然后，一旦你正确定位它，它在所有浏览器中看起来都是一样的。

这实际上并不容易做 - 在IE中，你需要使用一个完全不同的旋转滤波器和复杂的矩阵数学，而不是你现在拥有的相对简单的rotation=3 - 所以我的建议使用名为CSSSandpaper的javascript polyfill来使IE8及更早版本识别标准的CSS旋转 - 它将在内部使用filter，但你需要的只是-sand-rotate(-90deg);和另一个标准的CSS变种。

这将使您的代码更易于使用，并且它将在浏览器中一致地工作。

回答你的第二个问题 - 是的，如果你使用filter进行轮换，那么将filter样式放在IE＆lt; = 8特定块中是个好主意，因为它们会干扰IE9。

IE9支持标准的CSS旋转，但也适用于过滤器，因此在IE9中，你可以获得两种旋转，这使得它完全错误。（你最终会出现图形损坏;它并不漂亮）。

但是，如果您按照我上面的建议使用CSS Sandpaper，那么这一点就无关紧要了，因为它会检测您所使用的IE版本，并且不会在IE9中运行，因此在这种情况下您不会需要IE8特定的样式表。

文本旋转270度在IE8中不起作用

1 个答案: