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

Question

我正在创建一个幻灯片菜单，其中一个标签文本旋转了 270 度。适用于所有现代浏览器，包括 Explorer 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 和 7 正确设置它给我建议吗？

还有一个附属问题:将这两个特定于 IE8 的定义分隔在一个单独的标记中是否有任何优势 as shown here ？

<!--[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 中有效。但是，旋转的元素位置不正确，因此当您第一次查看页面时，旋转的文本超出了屏幕的边缘。当您将鼠标悬停并且框进入 View 时，它确实会显示。

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

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

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

要回答您的第二个问题——是的，如果您使用 filter 进行旋转，那么最好将 filter 样式放在IE<=8 特定 block ，因为它们会干扰 IE9。

IE9 支持标准的 CSS 旋转，但也可以与过滤器一起使用，所以在 IE9 中，就目前的情况而言，您同时获得了两种旋转，这使它变得完全错误。 (你最终会遇到图形损坏；它不漂亮)。

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