jQuery 旋转 - IE7 或 IE8 问题答案

【问题标题】：jQuery Rotate - IE7 & IE8 IssuesjQuery 旋转 - IE7 或 IE8 问题
【发布时间】：2012-11-23 18:55:30
【问题描述】：

我正在使用 Jquery Rotate 将图像旋转一米，效果很好，但在 IE7 和 IE8 中它会被推高约 200 像素，并且图像周围有黑色笔触/边框。

我正在使用 jQueryRotate3.js，它可以正常工作，但位置已关闭，并且不确定黑色边框来自哪里？

JS：

            var start = 0;
        // Sets the Value of the City for now   
            var angle = 1 + Math.floor(Math.random() * 180);

            $("img.pointer").rotate({
                 angle: start,
                 animateTo: angle,
                 easing: $.easing.easeInOutSine
            })

HTML：

<div class="city-details">
   <div class="details">
     <img class="pointer" src="http://demo.omnigon.com/christian_bovine/shamelesscity/images/pointer.png" alt="" />
    </div>
</div>

您可以在此处查看代码：http://jsfiddle.net/xtian/6gcS8/1/

我真的很想让它在 IE7 和 IE8 中运行。

【问题讨论】：

这看起来像插件jQueryRotate3.js 正在做一些时髦的事情，因为如果你注释掉你的 JS，这个位置就很好
IE9

标签： jquery rotation image-rotation jquery-rotate

【解决方案1】：

jsFiddle DEMO

我查看了您使用的 jQuery Rotate v3.1 脚本，它很稀疏，只需为 IE 完成工作所需的最少内容，考虑到这一点很好。

只需根据您的margin-top 和margin-left 值包含top 和left 的两个CSS 规则，使其在IE 系列的非CSS3 浏览器中工作。

例子：

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    top: 211px;
    left: 48px;    
    margin: 211px 0 0 48px;
}

请注意，无需设置 CSS position，因为此脚本将其设置为 absolute，它会覆盖您提供的任何内容。

在 IE 浏览器中解决 图像黑色边框 问题的一种方法是将 background-color 属性设置为与背景匹配的值...希望在您的情况下您有 3 种蓝色以及中间部分的白色...... 所以这不是一个好主意。

改为使用最常见的解决方案，即PNG8 Filetype Image with Transparency，正如SO Answer 中所讨论的那样。

【讨论】：

使用了具有 alpha 透明度的 PNG8，这种方法通常可以解决 IE 的透明度问题，在 ie7/8 中不起作用。旋转后仍有黑边。

【解决方案2】：

我设法通过删除边距并使用相对定位设置放置来使其工作，例如：

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    margin: 211px 0 0 48px;
}

到

img.pointer{
    display: block;
    width: 192px;
    height: 11px;
    position: relative;
    top: 218px;
    left: 50px;
}

我没有安装 ie7/8，但我可以使用 IE9 兼容性视图设置，它显示原始小提琴中的针放错了位置（它在 Chrome 和 Firefox 中仍然按预期运行）。

试试这个更新的小提琴，如果你还有问题，请告诉我：http://jsfiddle.net/6gcS8/4/

【讨论】：

【解决方案3】：

在 IE7/8 中执行旋转或淡入淡出等操作总是可能产生不希望的副作用，因为它超出了浏览器的标准功能。在所有其他浏览器中，这非常容易，但对于旧的 IE，您的 jQuery 插件将做一些非常 hacky 的东西来使其工作。这种骇人听闻的东西在某些情况下可能会起作用，但往往非常脆弱且容易损坏。

IE 的旋转机制非常笨拙。所描述的图像被向上移动 200 像素的问题听起来像是旋转中心点可能不正确。这是我在 IE 中尝试使用旋转时经常遇到的问题。我本来希望您的 jQuery 插件能够透明地处理它，但是如果它出错了，那么我不确定您如何在不完全绕过插件或为 IE 使用高 200 像素的不同图像或其他东西的情况下纠正它像这样。

关于黑色边框，这可能是处理 PNG 图像上的 alpha 通道的问题。您可能需要使用 GIF 图像来确认这一点（尽管它看起来不太好）。

但总的来说，我的主要建议是完全避免在旧 IE 中做这种事情。只是有太多问题，值得付出努力。

查看您的 jsFiddle 示例，您似乎这样做是为了绘制速度计类型的仪表并为其设置动画。

我可以建议一种替代方法，它完全不需要搞乱旋转 DOM 元素。

有一个名为Raphael 的Javascript 库，用于绘制矢量图形。它适用于所有浏览器，包括旧的 IE 版本。使用 Raphael 很容易画出好看的速度表。事实上，我在 SO 的另一个答案中提供了一个 4 行 JS 脚本来做到这一点。见这里：Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)。您可以使用该脚本，修改它以使用您现有的仪表背景图像和宾果游戏，一个在所有浏览器中都能正常工作的速度仪表，而不会出现任何与试图让 IE 做的事情无关的错误。

希望对您有所帮助。

【讨论】：