Possible bug: offset() with IE7 and an iframe
Hello,
I'm not sure if jQuery is supposed to only support valid doctypes, but
I have an example of inconsistent behaviour of offset() in IE7 which I
cannot reproduce in Firefox or Chrome.
Open example.html in IE7 and scroll the scrollbar in the iframe. The
header displays the offset of the div on the page in the iframe. This
div stays in the same spot relative to its document, so the offset is
constant.
If you comment out the doctype for example.html, and open the page in
IE7, the offset will change when you scroll the iframe. Under these
conditions offset() seems to be returning the offset of the div
relative to example.html, not relative to inner.html.
Is that a bug in jQuery, or expected behaviour?
example.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval(function() {
$('#top').text($('iframe').contents().find('#inner').offset().top);
}, 100);
});
</script>
</head>
<body style="padding: 0; margin: 0; overflow: auto;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;
height: 100%">
<tr style="height: 1%">
<td>offset().top: <span id="top"></span></td>
</tr>
<tr style="height: 100%">
<td>
<iframe width="100%" height="100%" src="inner.html"/>
</td>
</tr>
</table>
</body>
</html>
inner.html:
<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1"/>
<title>A title</title>
</head>
<body>
<div id="inner" style="height: 2000px">foo</div>
</body>
</html>