Question

我很难过。我的页面上有一个段落，当我点击它时，当我用IE8浏览页面时，会使一些附近的文本向上移动。我已经剥离了一切，以获得一个很好的repro。在我的复制案例中，它实际上更糟糕。如果我单击其他文本，将导致文本向下移动。

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

我很乐意删除<div style="clear:both;"></div>，除非它不受我的控制。评论所指出的区域外的所有内容都在我的掌控之中。

在chrome和firefox中运行良好。

编辑：我觉得第一段需要很长时间才错。事实上，如果它太长，我就失去了我的责备。我已经更新了我的repro以使用更短的第一段。

编辑：这与顶级div的边距有关。如果我添加更多段落，那么转变就会消失。但是，如果我然后增加该div的余量，则转换返回。

更新：我确认这不会在实际上重现，即8（必须使用我的旧XP电脑）。这只是IE9在IE8模式下的问题。 此外，我想通过将style="overflow: hidden;添加到段落的父div中来解决我能够修复它。

Answer 1

此问题特定于IE9-in-IE8模式。解决方案是隐藏父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>

在IE8模式下单击相邻文本时文本移位

1 个答案: