jQuery reports incorrect element height in Firefox

2019-09-06 14:10发布

站内问答 / JavaScript
1622 1 4

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?

1条回答
手持菜刀，她持情操
2楼-- · 2019-09-06 14:38

Try this instead:

var div = $(this).contents().find("html");
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)