这个CSS不应该在IE9中工作吗?

时间:2013-07-26 19:13:01

标签: jquery html css internet-explorer css3

我有一个我正在旋转的div。它可以在每个现代浏览器中运行,但IE的代码似乎不起作用。

#box
{
    width: 400px;
    height: 400px;
    display: inline-block;
    position: absolute;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transition: all 0.8s 1s ease-in-out;
    -webkit-transition: all 0.8s 1s ease-in-out;
    -moz-transition: all 0.8s 1s ease-in-out;
    -o-transition: all 0.8s 1s ease-in-out;
    opacity:0;
}

#box.animate
{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    opacity:100;
}

我看过以下两个类似的问题,但他们的解决方案并没有解决我的问题。

css3 rotation doesn't work in IE9

CSS3 transform: rotate; in IE9

我愿意使用jQuery,但我不太清楚它自己编写代码。

更新

下面是我询问如何使用jQuery解决的新问题的链接。如果你能帮忙,我会帮你做个蛋糕。或者馅饼。

Rotating a div using jQuery that's supported by IE9

3 个答案:

答案 0 :(得分:4)

IE9不支持转换,因此,它不会使用转换样式进行动画处理。

http://caniuse.com/#search=transition

你必须使用javascript或javascript库(jQuery等)才能在IE 9中实现这一点。所以要回答你的初始问题,答案是否定的,它应该不适用于IE 9.你可能想要然而,重新发布并发布关于如何在jquery中进行图像旋转的新问题。

答案 1 :(得分:0)

不幸的是,IE9及更早版本不支持CSS属性

transition:

要创建您的dealed效果,您应该使用jQuery,Mootools或其他类似的JavaScript库。 我知道这不是解决方案,只是提示。

答案 2 :(得分:-1)

页面上的内容类型是什么?如果您没有定义内容类型,我相信IE9会进入“怪癖模式”。您应该将内容类型设置为以下内容,以获得IE中的最佳性能:

< meta http-equiv =“X-UA-Compatible”content =“IE = edge”/>