jQuery reports incorrect element height in Firefox iframe
Posted
by Augustus
on Stack Overflow
See other posts from Stack Overflow
or by Augustus
Published on 2009-08-03T03:49:03Z
Indexed on
2010/05/22
22:11 UTC
Read the original article
Hit count: 227
Here a short test to demonstrate my problem. I have a page that loads an iframe:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
</head>
<body>
<iframe id="iframe" src="box.html" style="width: 100px; height: 100px"></iframe>
<script>
$('#iframe').bind('load', function () {
var div = $(this).contents().find('div');
alert(div.height());
alert(div.innerHeight());
alert(div.outerHeight());
alert(div.outerHeight(true));
});
</script>
</body>
</html>
The iframe (box.html) contains a single styled div:
<html>
<head>
<title></title>
<style>
div {
height: 50px;
width: 50px;
margin: 5px;
padding: 5px;
border: 2px solid #00f;
background-color: #f00;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
The four alerts should return 50, 60, 64 and 74, respectively. This works as expected in Safari and Chrome. In FF 3.5.1, they all return 64. This is wrong.
Does anyone know how I can force FF/jQuery to return the correct values?
© Stack Overflow or respective owner
