Je viens de trouver un bug sur Internet Explorer 8. Ce dernier ne sait pas modifier correctement le href d'une balise a -_-" Voici le cas pratique :

  2. 	Indenté
  3. </h2>
  5. 	<a href="http://alt-i.fr/">
  6. 		http://alt-i.fr/
  7. 	</a>
  8. </p>
  10. 	<a href="http://www.google.com">
  11. 		http://www.google.com
  12. 	</a>
  13. </p>
  15. 	Non indenté
  16. </h2>
  18. 	<a href="http://alt-i.fr/">http://alt-i.fr/</a>
  19. </p>
  21. 	<a href="http://www.google.com">http://www.google.com</a>
  22. </p>
  24. 	Texte différent
  25. </h2>
  27. 	<a href="http://alt-i.fr/">Alt-I</a>
  28. </p>
  30. 	<a href="http://www.google.com">Google</a>
  31. </p>
  32. <script type="text/javascript" charset="utf-8">
  33. //<![CDATA[
  34. 	(function()
  35. 	{
  36. 		var as = document.getElementsByTagName('a');
  37. 		for (var i = 0; as[i]; i++)
  38. 		{
  39. 			as[i].href = 'http://www.over-blog.com';
  40. 		}
  41. 	})();
  42. //]]>
  43. </script>

Donc des liens dont le label est identique au href (c'est à dire que sera affiché sur la page web l'url vers laquelle il lie) et des liens avec un label différent. Un script qui prends tous les liens et modifie leur href, donc pour changer l'url vers laquelle ils lient, mais pas leur label.

Le résultat est évidemment correct sur tous les navigateurs. Par exemple Firefox :

Firefox n'a aucun bug sur le href

Par contre sous IE8, c'est autre chose. Celui-ci se permet de modifier non seulement le href, mais aussi le label. Regardez :

IE8 bug a href

La solution absolument ridicule est donc de mettre de coté le innerHTML avant de modifier le href, puis de le remettre correctement :

  1. (function()
  2. 	{
  3. 		var as = document.getElementsByTagName('a');
  4. 		for (var i = 0; as[i]; i++)
  5. 		{
  6. 			var label = as[i].innerHTML;
  7. 			as[i].href = 'http://www.over-blog.com';
  8. 			as[i].innerHTML = label;
  9. 		}
  10. 	})();

Merci Microsoft.