我被难住了。我的页面上有一个段落，当我使用 IE8 浏览该页面时，单击该段落会导致附近的一些文本向上移动。我已经剥离了所有内容以获得良好的复制。在我的复制案例中，它实际上更糟。如果我单击其他一些文本，它会导致文本向下移动。
<!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 中运行良好。
编辑: 看来我对第一段需要很长的看法是错误的。事实上，如果它太长，我会失去我的复制品。我已经更新了我的复制品以使用较短的第一段。
编辑: 它与顶部 div 的边距有关。如果我添加更多段落，这种转变就会消失。但是，如果我随后增加该 div 的边距，就会返回。
更新:我确认这不会在实际的 ie 8 中重现(必须使用我的旧 XP 计算机)。这只是 IE8 模式下的 IE9 问题。 此外，我发现我可以通过添加 style="overflow: hidden; 来修复它到段落的父 div。
最佳答案
此问题特定于 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>
关于html - 在 IE8 模式下单击相邻文本时文本移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5902672/