IE8 compatibility mode (or maybe IE7) reflow bug related to css position relative
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 i开发者_运维知识库s 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 ?
I have no earthly clue why IE7 and below do this, but the solution is to give the container
<div style='background-color:black;'>
a relative position,
<div style='background-color:black;position:relative;'>
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.
加载中,请稍侯......
精彩评论