jQuery 旋转 - IE7 和 IE8 问题

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 工作所需的最少内容，考虑到这一点很好。

只需根据您的 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 文件类型图像，如本文 SO Answer 中所述。 .