Home/ Questions/Q 6112887
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T14:47:46+00:00

I’m stumped. I’ve got a paragraph on my page that, when clicked, causes some

  • 0

I’m stumped. I’ve got a paragraph on my page that, when clicked, causes some nearby text to shift up when I browse the page with IE8. I’ve stripped everything out to get a good repro. In my repro case it’s actually worse. If I click some other text it will cause the text to shift back down.

<!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>

I’d happily delete the <div style="clear:both;"></div> except that it is out of my control. Everything outside the area indicated by comments is in my control.

Works fine in chrome and firefox.

Edit: It seems I was wrong about the first paragraph needing to be long. In fact, if it is too long, I lose my repro. I’ve updated my repro to use a shorter first paragraph.

Edit: It has something to do with the top div’s margin. If I add more paragraphs, the shift goes away. But if I then increase the margin on that div, the shift returns.

Update: I confirmed this does not repro in actual ie 8 (had to use my old XP computer). This is an IE9 in IE8 mode issue only. Also, I figured out I am able to fix it by adding style="overflow: hidden; to the parent div of the paragraphs.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This issue is specific to IE9-in-IE8-mode. The solution is to hide the overflow of the parent div.

    <body>
    <div style="margin: 100px 0;">margin</div>
    <div style="width:32px; height:32px; float:left; background: Yellow;">float</div>
    <div style="overflow: hidden">
        <p>Click on this first paragraph and the "abc" text no longer jumps up.</p>
        <p>Click on this second paragraph and the "abc" text no longer jumps down.</p>
        <div style="clear:both;"></div>
    </div>
    <div>abc</div>
</body>
    • 0