11

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

4

3 回答 3

5

jsFiddle 演示

我查看了您使用的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 种蓝色和白色...所以这不是好主意。

相反，请使用最常见的解决方案，即 a PNG8 Filetype Image with Transparency，如本SO Answer中所述。

于 2012-12-09T11:29:49.980 回答
0

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

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/

于 2012-12-07T23:07:00.677 回答
0

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

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

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

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

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

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

有一个名为Raphael的 Javascript 库，它可以绘制矢量图形。它适用于所有浏览器，包括旧的 IE 版本。使用拉斐尔很容易画出好看的速度表。事实上，我在 SO 上的另一个答案中提供了一个 4 行 JS 脚本来做到这一点。请参阅此处：绘制半量规/速度计（需要 JavaScript Canvas 或 Java Swing 示例）。您可以使用该脚本，修改它以使用您现有的仪表背景图像，以及宾果游戏，一个在所有浏览器中工作的速度仪表，没有任何试图让 IE 做事的错误不是设计的。

希望有帮助。

于 2012-12-07T23:14:33.933 回答