html – IE8 CSS旋转

发布时间：2020-12-14 21:13:42 所属栏目：资源来源：网络整理

导读：我正在寻找IE8中旋转元素的CSS解决方案.我发现的一些解决方案说它应该在IE8中运行,但它不适合我.我做错了什么？这是我尝试过的： !DOCTYPE htmlhtmlhead title/title style .rotate { font-weight: bold;color: #000;background: #aa0;display: block;margi

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

这是我尝试过的：

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

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

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

解决方法

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

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

所以,使用这个

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

另请看这个问题：CSS rotate property in IE可能会对你有所帮助

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!