jQuery旋轉 - IE7和IE8問題

我正在使用Jquery旋轉來旋轉一米左右的圖像，它的效果很好，但在IE7和IE8中它被推高了大約200個像素，並且在圖像周圍有一個黑色筆畫/邊框。jQuery旋轉 - IE7和IE8問題

我使用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得到這個工作。

來源

2012-12-05 Xtian

這看起來像插件'jQueryRotate3.js'是幹什麼時髦，因爲如果你註釋掉你的JS位置是好的 – Ronnie

IE9 <濾波器和PNG問題（它不只是IE6），黑色邊框發生是因爲alpha通道。您可以使用8位PNG或GIF，它會工作。 – pocesar

jsFiddle DEMO

我看着你的使用jQuery的旋轉V3.1腳本，它是稀疏只需要把工作的IE瀏覽器，這是很好的考慮所做的微乎其微。

根據您的margin-top和margin-left值，只需在top和left之間包含兩條CSS規則，即可使其在非CSS3瀏覽器的IE系列中工作。

例子：

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。

來源

2012-12-09 11:29:49 arttronics

已經使用具有阿爾法透明一個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; 
}

我沒有IE7/8安裝，但我這個作品與IE9兼容性視圖設置，這表明在原始的小提琴放錯位置的針（並且它仍然表現在Chrome & Firefox中）。

試試這個更新小提琴，讓我知道如果你仍然有問題：http://jsfiddle.net/6gcS8/4/

來源

2012-12-07 23:07:00 WebChemist

做的東西像旋轉或IE7衰落/ 8總容易產生有害的副作用，因爲它超越的標準功能瀏覽器。在其他任何瀏覽器中，它都很容易，但對於舊的IE瀏覽器，您的jQuery插件將會做一些非常黑客的工作。在某些情況下，這種冒險的東西可能會起作用，但往往非常脆弱，容易破碎。

IE的旋轉機制非常笨重。所描述的圖像向上移動200個像素的問題聽起來像旋轉中心點可能不正確。這是我在IE中嘗試使用旋轉時遇到的很多事情。我希望你的jQuery插件能夠透明地處理這個問題，但是如果它出錯了，那麼我不確定如何在沒有完全繞過插件的情況下修正它，或者使用200像素或更高的IE瀏覽器的其他圖片像那樣。

重新設置黑色邊框，這可能是在處理PNG圖像上的Alpha通道時出現的問題。您可能想通過使用GIF圖像來確認這一點（儘管它看起來不那麼好）。

但總的來說，我的主要建議是完全避免在舊IE中做這種事情。它只是有太多問題值得付出努力。

看着你的jsFiddle的例子，它似乎是你這樣做，以繪製和動畫的速度計型量表。

我可以提出一種替代方法，它不需要完全旋轉DOM元素。

有一個Javascript庫叫做Raphael，它可以繪製矢量圖形。它適用於所有瀏覽器，包括舊的IE版本。使用拉斐爾繪製一個好看的速度儀是非常容易的。事實上，我在這裏提供了另一個關於SO的4行JS腳本來做到這一點。見這裏：Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed)。你可以採取該腳本，修改它使用您現有的規的背景圖片，和賓果遊戲，工作速度表計在所有瀏覽器，不涉及任何試圖讓IE瀏覽器的bug做的事情是沒有的設計。

希望有所幫助。

來源

2012-12-07 23:14:33 Spudley

jQuery旋轉 - IE7和IE8問題

回答

相關問題