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: 230

Filed under:
|
|
|
|

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

Related posts about JavaScript

Related posts about jQuery