Je suis perplexe. J'ai un paragraphe sur ma page qui, lorsqu'on clique dessus, provoque le déplacement vers le haut d'une partie du texte situé à proximité lorsque je navigue sur la page avec IE8. J'ai tout enlevé pour obtenir une bonne reproduction. Dans mon cas de reproduction, c'est pire. Si je clique sur un autre texte, le texte se déplace à nouveau vers le bas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>IE8 text shift</title>
</head>
<body>
<div style="margin: 100px 0;">margin</div>
<div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
<div>
<!-- This HTML comes from an external system. I cannot remove -->
<!-- the <div style="clear:both;"></div>, which is always included. -->
<p>Click on this first paragraph and the "abc" text jumps up.</p>
<p>Click on this second paragraph and the "abc" text jumps down.</p>
<div style="clear:both;"></div>
<!-- End External HTML -->
</div>
<div>abc</div>
</body>
</html>Je supprimerais volontiers le <div style="clear:both;"></div> sauf que c'est hors de mon contrôle. Tout ce qui se trouve en dehors de la zone indiquée par les commentaires est sous mon contrôle.
Cela fonctionne bien dans chrome et firefox.
Edit : Il semble que j'avais tort sur le fait que le premier paragraphe devait être long. En fait, s'il est trop long, je perds ma reproduction. J'ai mis à jour mon repro pour utiliser un premier paragraphe plus court.
Edit : Cela a quelque chose à voir avec la marge de la division supérieure. Si j'ajoute d'autres paragraphes, le décalage disparaît. Mais si j'augmente ensuite la marge de cette division, le décalage revient.
Mise à jour : J'ai confirmé que cela ne se reproduit pas dans IE 8 (j'ai dû utiliser mon vieil ordinateur XP). Il s'agit d'un problème d'IE9 en mode IE8 uniquement. Aussi, J'ai compris Je suis capable de le réparer en ajoutant style="overflow: hidden; à la division parent des paragraphes.
