Question

我正在使用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中使用它。

Answer 1

jsFiddle DEMO

我查看了你使用的 jQuery Rotate v3.1 脚本，它只是为IE完成工作所需的最小值，这很好考虑。

根据您的top和left值，为margin-top和margin-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中所述。

Answer 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/

Answer 3

在IE7 / 8中进行旋转或淡入等操作总是会产生不必要的副作用，因为它超出了浏览器的标准功能。在其他所有浏览器中它都很容易，但对于旧的IE，你的jQuery插件将会做一些非常糟糕的事情来使其工作。在某些情况下，这些hacky东西可能会起作用，但往往非常脆弱，容易破碎。

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

重新设置黑色边框，这可能是处理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)。您可以使用该脚本，修改它以使用您现有的仪表背景图像，并在所有浏览器中使用bingo，一个工作速度计，没有任何涉及尝试使IE做事情的错误不适合。

希望有所帮助。

jQuery旋转 - IE7＆amp; IE8问题

3 个答案: