0

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

这是jsfiddle +它的预览。

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 的定义分隔在一个单独的标签中是否有任何优势，如此处所示？

<!--[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]-->

感谢您的任何提示！

4

1 回答 1

2

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

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

This isn't actually that easy to do -- in IE, you'll need to use a completely different rotation filter with complex matrix maths rather than the relatively easy rotation=3 that you have now -- so my recommendation would be to use a javascript polyfill called CSSSandpaper to make IE8 and earlier recognise the standard CSS rotation - it'll use the filter internally, but all you need is -sand-rotate(-90deg); alongside the other standard CSS variants.

This will make your code much easier to work with, and it'll work consistently across browsers.

To answer your second question -- yes, if you're using filter to do rotations, then it would be a good idea to put the filter styles in an IE<=8 specific block, because they interfere with IE9.

IE9 supports the standard CSS rotation, but also works with the filter, so in IE9 as things stand, you're getting both rotations, which is making it go completely wrong. (you end up with graphical corruption; it's not pretty).

However, if you're using CSS Sandpaper as I suggested above, then this point is irrelevant because it will detect which IE version you're on, and won't run in IE9, so in that case you won't need IE8-specific stylesheets.

于 2013-05-23T16:11:31.180 回答