IE8 CSS旋转 [英] IE8 CSS rotation

查看:874
本文介绍了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 * / 

另请参阅这个问题:在IE 中的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旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆