Jquery Innerfade Ne s'affiche pas correctement dans IE 7 et ci-dessous

Question

Im construire un site Web avec un en-tête jquery qui fondu une image dans l'autre (comme vous avez tous vu auparavant). Jetez un oeil à une page d'exemple ici:

http://hqinternetsolutions.com/fullservice/index.html

Dans IE6, les images changent chemin vers la droite la création d'une marge. J'ai compris ce qui le causait. Dans le fichier jquery.innerfade.js, il y a une ligne qui dit:

for (var i = 0; i < elements.length; i++) { 
       $(elements[i]).css('z-index', String(elements.length-i)).**css('position', 'absolute').hide();** 
      }; 

La position: absolute est à l'origine de l'image apparaisse de manière incorrecte dans IE6. Lorsque je change l'absolu en relatif ou fixe, l'image apparaît au bon endroit, mais l'image suivante se charge en dessous jusqu'à ce que le fondu soit terminé et ensuite il se déplace vers le haut. Je ne peux pas sembler obtenir le innerfade pour fonctionner correctement dans ie. Des idées?

Answer 1

J'ai le même problème. J'ai pu pirater le code, mais maintenant les images sont coupées en transition demi Durning:

http://rosodigital.com/gray/index.htm

Answer 2

vous pouvez résoudre ce problème avec votre fichier CSS seulement:

• définir l'élément parent comme position: relative
• définir l'image balise IMG comme position: absolute; en haut: 0, à gauche: 0;

Answer 3

Essayez ceci, cela a fonctionné pour moi:

Ouvrir le fichier js le innerfade et supprimer cette ligne:

$ ('height', settings.containerheight).addClass(settings.runningclass); 

puis dans le css utiliser ces tags:

#somebanner { 
    overflow: hidden; 
    position: absolute; 
    width:400px; 
    left:5px; 
    bottom:5px; 
    height:36px; 
} 

cacher Dépassement de sorte que la barre de panoramique sur le navigateur n'apparaît pas, alors vous devez définir la hauteur et la largeur, automatique ne fonctionne pas.

Answer 4

changement

$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide(); 

à

$(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').css('left','0').hide();