IE8 CSS旋转 | CSS旋转

本文介绍了IE8 CSS旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在寻找CSS解决方案的旋转元素在IE8。一些解决方案，我发现说它应该在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> 
测试旋转
< / div> 
< / body> 
< / html>

如果你在回答之前测试你的解决方案，这将是非常感谢，

如果任何人仍然好奇，问题不是代码，而是测试环境。
你应该使用真正的IE8，而不是IE10的模拟器IE11（不确定IE9）

解决方案

缺少IE供应商前缀-ms -

  filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）;

因此，使用此

  -ms-filter：progid：DXImageTransform.Microsoft.BasicImage（rotation = 3）; / * for IE8 * /

另请参阅这个问题：中的CSS轮播属性，可能会帮助您

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?

Here is what I tried:

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

[EDIT]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)

解决方案

You are missing IE vendor prefix -ms-

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

So, Use this

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

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

这篇关于IE8 CSS旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！