jQuery Drehen - IE7 & IE8 Probleme

Question

Ich benutze Jquery drehen, um ein Bild um einen Meter zu drehen, und es funktioniert gut, aber in IE7 und IE8 wird es etwa 200 Pixel hochgeschoben und hat einen schwarzen Strich/Rahmen um das Bild.

Ich benutze jQueryRotate3.js, die funktioniert, aber die Position ist aus, und nicht sicher, woher der schwarze Rand kommt?

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>​ 

Sie den Code hier sehen können: http://jsfiddle.net/xtian/6gcS8/1/

Ich würde wirklich diese Arbeit in IE7 und IE8 zu lernen.

Answer 1

jsFiddle DEMO

Ich schaute in den jQuery Rotate v3.1 Skript spärlich Ihre Verwendung und es ist nur mit dem minimal braucht es die Arbeit erledigt für IE zu erhalten, die unter Berücksichtigung schön ist.

sind nur zwei CSS-Regeln für top und left, basierend auf Ihren margin-top und margin-left Werte, die sie haben in IE Reihe von nicht CSS3 Browser arbeiten.

Beispiel:

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

Hinweis gibt es keine Notwendigkeit CSS gesetzt ist position da dieses Skript, um es zu absolute setzt die alles über reitet Sie.

Verfahren den Bilder schwarzen Rand Problem in IE-Browser die background-color Eigenschaft auf den Wert zu setzen, ist zu beheben, die den Hintergrund paßt ... in Ihrem Fall zu erwarten haben Sie 3 Farben Blau zusammen mit Weiß in der Mitte Abschnitt ... so das ist keine gute Idee.

Verwenden Sie stattdessen die häufigste Lösung, die eine PNG8 Filetype Image with Transparency ist, wie in dieser SO Answer diskutiert.

Answer 2

schaffte ich es zum Laufen zu bringen, indem Sie den Rand zu entfernen und wie Platzierung mit relativer Positionierung Einstellung:

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

zu

img.pointer{ 
    display: block; 
    width: 192px; 
    height: 11px; 
    position: relative; 
    top: 218px; 
    left: 50px; 
} 

Ich habe nicht IE7/8 installiert, aber ich diese Werke mit IE9 Kompatibilitätsansicht Einstellungen, die die falsche Nadel in der ursprünglichen Geige zeigte (und es verhält sich immer noch wie erwartet in Chrome & Firefox).

Versuchen Sie, diese aktualisiert Geige und lassen Sie mich wissen, wenn Sie noch Fragen haben: http://jsfiddle.net/6gcS8/4/

Answer 3

Sachen tun wie Rotation oder in IE7 Fading/8 ist immer wahrscheinlich unerwünschte Nebenwirkungen haben, weil es über die Standardfunktionen von der los ist Browser. In jedem anderen Browser ist es kinderleicht, aber für den alten IE wird dein jQuery-Plugin ziemlich hacky Sachen machen, damit es funktioniert. Dieses hacky Zeug kann in einigen Fällen funktionieren, aber neigt dazu, sehr brüchig zu sein und leicht zu brechen.

Der Drehmechanismus von IE ist sehr klobig. Das beschriebene Problem, dass das Bild 200 Pixel nach oben bewegt wird, klingt wie der Rotationsmittelpunkt falsch. Dies ist etwas, auf das ich bei der Arbeit mit der Rotation im IE viel gestoßen bin. Ich hätte erwartet, dass dein jQuery-Plugin transparent damit umgeht, aber wenn es falsch läuft, bin ich mir nicht sicher, wie du es korrigieren würdest, ohne das Plugin komplett zu umgehen oder ein anderes Bild für IE zu verwenden, das 200 Pixel höher ist so wie das.

An der schwarzen Grenze, möglicherweise ein Problem mit der Handhabung des Alphakanals auf dem PNG-Bild. Möglicherweise möchten Sie dies bestätigen, indem Sie stattdessen ein GIF-Bild verwenden (obwohl es nicht so gut aussieht).

Aber insgesamt ist meine wichtigste Empfehlung zu vermeiden, diese Art von Sache in alten IE ganz zu tun. Es sind einfach zu viele Probleme, um es sich zu lohnen.

Wenn Sie sich Ihr jsFiddle-Beispiel ansehen, scheint es, als würden Sie das tun, um ein Geschwindigkeitsmesser zu zeichnen und zu animieren.

Darf ich einen alternativen Ansatz vorschlagen, der die Notwendigkeit beseitigt, sich mit rotierenden DOM-Elementen zu befassen.

Es gibt eine Javascript-Bibliothek namens Raphael, die Vektorgrafiken zeichnet. Es funktioniert in allen Browsern, einschließlich der alten IE-Versionen. Es ist sehr einfach, mit Raphael eine gutaussehende Tachoscheibe zu zeichnen.In der Tat habe ich ein 4-Zeilen-JS-Skript in einer anderen Antwort hier auf SO zur Verfügung gestellt, um genau das zu tun. Siehe hier: Drawing a half gauge/speedometer (JavaScript Canvas or Java Swing Example needed). Sie könnten dieses Skript nehmen, es modifizieren, um Ihr vorhandenes Hintergrundbild zu verwenden, und Bingo, ein funktionierendes Tacho-Messgerät in allen Browsern, ohne die Fehler, die damit verbunden sind, IE zu machen, ist nicht dafür gedacht.

Hoffe, dass hilft.