1

大家好，我有一些代码可以旋转 div 并使其向上移动。它适用于除 IE 之外的所有浏览器。任何帮助都会很棒。

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)'
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

};

4

3 回答 3

1

您在问题中提供的代码应该在 IE9 中工作。

我能想到它不起作用的唯一原因是您的 IE9 实际上是在 IE8 兼容模式下呈现的。

这实际上是一个很常见的问题（特别是对于开发人员，因为 IE 默认为本地网络上的站点提供兼容模式，这通常包括您的开发服务器）。

要检查，请打开开发工具菜单 (F12)，然后查看右上角；它应该向您显示浏览器模式。如果它说的不是“IE9 标准”，那么你需要更正它。这个恼人的默认设置可以如下关闭：

  • 选择“工具”菜单，
  • 选择兼容性视图设置。
  • 取消勾选激活兼容模式的选项。

您可能还想在页面中添加元标记以强制 IE 对其他用户使用标准模式：

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

有了这些措施，您的页面应该以 IE9 标准模式呈现，然后您应该能够使用标准 CSS 旋转。

希望有帮助。

于 2012-12-08T00:06:20.743 回答
0

你能告诉你使用的是什么IE浏览器版本吗？您的代码应该适用于 IE9，尝试在您的 css 中为其他版本的 IE 添加此代码：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

所以你的代码应该如下所示：

   function rotate(degree) {
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)',
        'transform': 'rotate(' + degree + 'deg)',
        'filter': 'progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)', /* IE7  Note this is the code for 45 degree */
        '-ms-filter': "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8  Note this is the code for 45 degree  */
    });
    console.log(degree);
    if (degree < 55) {
        timer = setTimeout(function() {
            rotate(++degree)
        }, 10)
};

参考 ：

CSS3 变换：旋转；在 IE9 中

IE中的CSS旋转属性

于 2012-12-07T23:32:36.683 回答
0

尝试

if($.browser.msie){
    $elie.css({ msTransform: 'rotate(' + degree + 'deg)' });
}else{
    $elie.css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
        '-moz-transform': 'rotate(' + degree + 'deg)',
        '-o-transform': 'rotate(' + degree + 'deg)',
        '-ms-transform': 'rotate(' + degree + 'deg)'
    });
}
于 2012-12-07T23:32:51.727 回答