IE8 CSS 旋转

2022-01-16 00:00:00 rotation html css internet-explorer-8

我正在寻找在 IE8 中旋转元素的 CSS 解决方案.我发现的一些解决方案说它应该在 IE8 中工作，但它不适合我.我做错了什么?

I'm looking for CSS solution for rotating elements in IE8. Some of solutions I've found say that it should work in IE8, but it does not for me. What I do wrong?

这是我尝试过的:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        .rotate {
            font-weight: bold;color: #000;background: #aa0;display: block;margin: 0 auto;width: 300px;height: 300px;top: 10%;text-align: center;line-height: 300px;
            -webkit-transform: rotate(-90deg);
            -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
            -o-transform: rotate(-90deg);
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
        }
    </style>
</head>
<body>
<div class="rotate">
    TESTING ROTATION
</div>
</body>
</html>

如果您在回答之前测试您的解决方案，我将不胜感激，如果您可以编辑我给定的示例并重新发布所有代码，那就太好了.

I would appreciate if you test your solution before answering, and it would be great ir you could just edit my given example and repost all code.

如果有人仍然好奇，问题不是代码，而是测试环境.您应该使用真正的 IE8，而不是 IE10/IE11 中的 IE8 模拟器(不确定 IE9)

If anyone is still curious the problem is not the code, but the testing environment. You should use real IE8, but not IE8 emulator in IE10/IE11 (not sure about IE9)

推荐答案

你缺少IE供应商前缀-ms-

You are missing IE vendor prefix -ms-

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

所以，使用这个

-ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* for IE8 */

也看看这个问题:CSS 在 IE 中旋转属性可能对你有帮助

Also look at this question: CSS rotate property in IE that might help you

相关文章