javascript - IE8 兼容模式(或可能是 IE7)与 css 相对位置相关的回流错误

标签 javascript css internet-explorer-7 dhtml reflow

有人对休闲行为有任何意见吗?
我已经在兼容模式下在 IE8 上对其进行了测试,但我不确定真正的 IE7 行为。 任何其他浏览器都正常运行。

当文档回流时,任何相对定位的图像都会丢失它们的坐标。
如果将文本添加到段落,就会看到该行为,但如果添加更多段落,则不会!

看这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Bad Behaviour</title>
    <script type='text/javascript'>
        window.onload = function(){
            document.getElementById('command').onclick = function(){
                var p = document.getElementById('paragraph');
                p.innerHTML = p.innerHTML + p.innerHTML;
                return false;
            }
        }
    </script>
</head>
<body>
    <a id='command' href='?'>command</a>
    <p id='paragraph'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation
    ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate
    velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident,
    sunt in culpa qui officia deserunt mollit
    anim id est laborum
    </p>
    <div style='background-color:black;'>
        <img src='success.png' style='position:relative; '/>
    </div>
</body>
</html>

看看回流后图像是如何显示的?

最佳答案

我不知道为什么 IE7 和更低版本会这样做,但解决方案是给容器

<div style='background-color:black;'>

相对位置,

<div style='background-color:black;position:relative;'>

它解决了这个(以及许多其他)问题。事实上,除非您有理由不这样做,否则最好为 IE 提供所有容器的相对位置。

关于javascript - IE8 兼容模式(或可能是 IE7)与 css 相对位置相关的回流错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5052930/

相关文章:

javascript - 简单的 Jquery 函数语法

javascript - 如何使用 JavaScript 从 Parse.com 类中的对象获取信息

javascript - 使用 Flow Router、Meteor 和 React 进行导航

javascript - ie7 jquery 不绑定(bind)?

javascript - readline-sync 在 Windows 上没有使用正确的编码

css - bootstrap 4 在中心对齐按钮

javascript - 如何使页面 "lights out"除了一个元素

javascript - 使用 jQuery 和 CSS 更改图像或卡片的反面

css - IE7 CSS 问题 - 为什么我的 h2 和 h4 标签之间有空格?

jquery - History.js 使用 ie6/ie7 恢复状态