Question

有没有人对休假行为发表评论？我在兼容模式下在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>

查看重排后图像的显示方式？

Answer 1

我不知道为什么IE7及以下会这样做，但解决方法是给容器

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

相对位置，

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

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

IE8兼容模式（或IE7）与css位置相关的reflow bug相关

1 个答案: