IE-Bug avec JQuery-Slider

Question

J'ai ajouté un curseur JQuery à ma page (BXSlider) qui fonctionne bien sur presque toutes les pages (dans tous les navigateurs) sauf celui dans IE (7 & 8).

les images dans le curseur sont chargées, mais elles montrent un grand espace vide au lieu de la table glissée (oui, il doit être une table à ce stade)!

désolé pour le lien posté mais je ne peux pas comprendre celui-ci et je ne sais pas quel code je devrais ajouter ici ... est-ce un problème CSS ou JQuery/Javascript liés?

J'espère que quelqu'un peut me montrer la bonne direction ...

merci beaucoup, Jochen

Answer 1

Comme je l'ai mentionné dans le commentaire ci-dessus. La façon dont vous implémentez le curseur produit un code HTML incorrect. Le bxslider enveloppe deux divs en dehors du td qui contient vos images, donc vous obtenez une structure HTML comme ceci: > tr> div> div> td, et c'est la raison pour laquelle IE a des problèmes - et le navigateur a raison avec ça. Si vous ne pouvez pas vous débarrasser de la table (que je préfère), procédez comme suit:

Modifier votre code HTML de la table de curseur comme ceci:

<table border="0"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="bx-box">[.. YOUR LINKS AND IMAGES .. ]</div> 
      </div> 
     </tr> 
    </tbody> 
</table> 

En JS faire ceci:

$(function(){ 
    // change your your selector to the nested div container 
    // and tada it works in ie too. 
    $('td .bx-box').bxSlider({ 
     infiniteLoop: true, 
     hideControlOnEnd: true 
    }); 
}); 

Maintenant, le code reste valide après que le bxSlider a ajouté les divs wrapper autour de lui et que le curseur s'affiche dans le navigateur croisé. Vous trouverez un demo here. Et faites-vous une faveur, validez votre code, il y a plus d'erreurs à l'intérieur (double fermeture d'un tag et autre), cela peut provoquer les comportements de mise en page les plus étranges.