jQuery fonctionne comme prévu dans IE8 mais pas dans Chrome ... besoin de quelqu'un pour regarder par-dessus mon code

Question

J'ai récemment mis à jour un site afin qu'il semble presque aussi bien dans IE8 que dans Chrome. J'ai réussi à obtenir les coins appliqués correctement, mais si vous jetez un coup d'oeil à http://clarkeyboy.zxq.net/test_longcatalogueitems.htm vous remarquerez que les lignes de catalogue apparaissent comme prévu dans IE8 mais pas dans Chrome. Dans Chrome, ils semblent continuer indéfiniment.

Quelqu'un pourrait jeter un oeil à la page jQuery/css dans la page ci-dessus et me dire où ils pensent que je vais mal? Je suis désolé de ne pas avoir pu raccourcir les fichiers CSS - ils sont généralement assez gros mais tous les styles (ou au moins la plupart) sont nécessaires dans cette page, pour montrer le problème.

J'ai également remarqué un comportement bizarre sur localhost que je ne peux pas reproduire sur la page ci-dessus. Il semble que la page s'affiche parfois parfaitement dans Chrome, parfois les lignes du catalogue apparaissent légèrement plus courtes et parfois elles disparaissent de la page. Je ne comprends pas pourquoi c'est.

Toute aide serait grandement appréciée.

Cordialement,

Richard

PS si quelqu'un a des conseils sur la façon dont je pourrais améliorer mon code, mais encore obtenir le même effet alors s'il vous plaît dire.

Je suis particulièrement intéressé par toutes les astuces sur la façon dont je pourrais réaliser les choses jQuery que je fais avec les lignes du catalogue sans JavaScript. J'ai essentiellement une image de taille inconnue (la largeur et la hauteur des balises img sont mises en place en regardant l'image sur le serveur et en la réduisant si elle est plus grande que la taille maximale des vignettes) et j'aimerais obtenir la description enjamber toute la hauteur et jusqu'à 20px de l'image.

Answer 1

Vous définissez des propriétés en fonction de la largeur des images dans le document et vous le faites sur document prêt.

Le pseudo-événement de document prêt se déclenche un certain temps après le remplissage du DOM HTML; cela ne garantit pas que toutes les images sont chargées. Sur Chrome et d'autres navigateurs qui prennent en charge l'événement DOMContentLoaded HTML5, le rappel prêt pour le document se produit généralement plus tôt que sur les autres navigateurs, ce qui signifie que les images n'ont pas encore été chargées.

Si vous souhaitez appeler une fonction lorsque tout ce qui est dans la page, y compris les images, est prêt, vous devez utiliser l'événement load ($(window).load(function() { ... });). Bien que je ne sache pas vraiment pourquoi vous êtes en train de jouer avec la mise en page scriptée ici car je ne vois pas immédiatement sur cette page quelque chose qui ne pourrait pas être fait avec CSS simple.