IE8 兼容模式（或者可能是 IE7）与 css 相对位置相关的回流错误
有人对休闲行为有任何评论吗？
我已经在 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>
看看回流后图像如何显示？
Has anyone any comments about fallowing behaviour?
I've tested it on IE8 in compatibility mode, but i'm not sure about real IE7 behaviour.
Any other browsers behave normally.
When document reflows, any relative positioned images loose their coordinates.
The behaviour is seen if text is added to paragraph, but not if more paragraphs are added !
See this:
<!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>
See how image is displayed after reflow ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我不知道为什么 IE7 及更低版本会这样做，但解决方案是给容器
一个相对位置，
这解决了这个（以及许多其他）问题。事实上，除非您有理由不这样做，否则最好为所有容器提供 IE 的相对位置。
I have no earthly clue why IE7 and below do this, but the solution is to give the container
a relative position,
which solves this (and many other) problems. In fact, unless you have a reason not to, it's best to give all your containers relative position for IE.