Après IE8, c'est au tour d'IE7 de nous fatiguer avec ses bugs. C'est un bug particulièrement chiant car difficile à détecter. Il apparait parfois quand on modifie le DOM et son style. IE 7 ne rends pas la page correctement, mais un rafraîchissement de l'affichage par un redimensionnement de la fenêtre ou un changement d'onglet remet tout en ordre. La difficulté dans ce cas de figure, une fois qu'on l'a identifié, est de forcer Interner Explorer à rafraîchir sa page sans déranger l'utilisateur.

J'ai rencontré le problème pendant le développement de la barre Overblog. Au DOMReady, la barre est insérée via javascript. Le DOM est construit, et son design est mis en place par une balise style contenant les CSS adéquates. Parmi celles-ci, je rajoute un margin-top de 30px sur la balise html afin de décaller toute la page vers le bas pour placer la barre overblog au dessus. C'est censé donner ça :

Sauf que sous IE 7, ça donne ça :

… et tout se décale correctement comme sur la première capture si je resize la fenêtre ou si je passe à un autre onglet et que je revient.

La solution que j'ai trouvé en fouillant sur le net est de changer discrètement une propriété CSS qui aurait une incidence sur l'ensemble de la page une fois que celle-ci est complètement chargée. En l'occurence :

YAHOO.util.Event.on(
	window,
	'load',
	function()
	{
		document.body.style.display = 'none';
		document.body.style.display = 'block';
	}
);

Ça semble bien fonctionner… mais pas tout le temps… La seule solution que j'ai trouvé est de faire encore pire que ça :

setInterval(
	function()
	{
		document.body.style.display = 'none';
		document.body.style.display = 'block';
	},
	500
);

Toutes les demi secondes, l'affichage est raffraichit. Ainsi, on est sur de ne plus avoir de problème avec ce bug sous IE7. Évidemment, ce code n'est à faire éxécuter que par IE7 en testant l'environnement par les méthodes de votre choix. (YAHOO.env.ua.ie == 7) si vous utilisez YAHOO User Interface (YUI).

Et encore merci Microsoft.