jQuery-Rotate-IE7&；IE8问题

我使用jQueryRotate将图像旋转一米左右，效果很好，但在IE7和IE8中，它会被提升约200像素，并且在图像周围有一个黑色笔划/边框

我使用的是jQueryRotate3.js，它可以正常工作，但是位置是关闭的，不确定黑色边框是从哪里来的

JS:

HTML:

​

您可以在此处看到代码：

---

我真的很想在IE7和IE8中实现这一点。

我通过删除边距并设置相对定位来实现这一点，如：

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

到

我没有安装ie7/8，但我使用了IE9兼容性视图设置，它显示了原来小提琴中放错的指针（在Chrome和Firefox中，它的行为仍然与预期的一样）

---

试试这个更新的提琴，如果你还有问题，请告诉我：

在IE7/8中做旋转或淡入淡出之类的事情总是可能有不必要的副作用，因为它超出了浏览器的标准功能。在其他所有浏览器中，这都非常简单，但对于旧IE来说，您的jQuery插件将要做一些非常粗糙的工作来让它工作。这些粗糙的东西在某些情况下可能会起作用，但往往非常易碎，容易破碎

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

对于黑色边框，这可能是处理PNG图像上的alpha通道时出现的问题。您可能希望通过使用GIF图像来确认这一点（尽管它看起来没有那么好）

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

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

我可以推荐一种替代方法，它可以完全消除旋转DOM元素的麻烦

有一个名为的Javascript库，用于绘制矢量图形。它适用于所有浏览器，包括旧的IE版本。用拉斐尔很容易画出一个好看的速比表。事实上，我在这里的另一个答案中提供了一个4行的JS脚本，以便准确地实现这一点。请参见此处：。你可以使用这个脚本，修改它以使用你现有的gauge背景图像，bingo，一个在所有浏览器中都能正常工作的speedo gauge，没有任何让IE做事情的bug

希望有帮助。

我查看了您使用的jQuery Rotate v3.1脚本，该脚本非常稀疏，只需要为IE完成工作所需的最低限度，考虑到这一点，它是很好的

只需根据

页边距顶部

和

页边距左侧

的值，为

页边距顶部

和

页边距左侧

添加两条CSS规则，即可在IE系列非CSS3浏览器中运行

例如：

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

注意，无需设置CSS

位置

，因为此脚本将其设置为

绝对值

，这将覆盖您提供的任何内容

解决IE浏览器中图像黑边框问题的一种方法是将

背景颜色

属性设置为与背景匹配的值。。。预计在你的情况下，你有3种颜色的蓝色与白色的中间部分…所以这不是个好主意

---

相反，使用最常见的解决方案是透明的PNG8文件类型图像，如本文所述。

这看起来像是插件jQueryRotate3.js在做一些奇怪的事情，因为如果你注释掉你的js，位置是finie9<有过滤器和PNG的问题（不仅仅是IE6），黑色边框的出现是因为alpha通道。你可以使用8位PNG或gif，它会起作用。在使用了具有alpha透明度的PNG8之后，这种通常通过IE解决透明度问题的方法在ie7/8中不起作用。旋转后仍有黑色边框。

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;
}

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