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完成工作所需的最小值,这很好考虑.

只需包含两个CSS规则,top并left根据您的值margin-top和margin-left值使其在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答案中所述.