jQuery.height()遇到padding与margin的时候,在IE6下表现不靠谱

本帖暂时只描述现象吧,其实要在IE6下解决的办法倒是有,就是不是太完美,所以就带过一下。

现象:就是在一个div包裹着另一个div的时候,当内层div使用了padding或者margin的时候,外层div的jQuery(div).height()方法返回值在IE7以上版本以及Firefox、Safari、Opera、Chrome等下面都是一致的,但是在IE6下的值,则是加上了padding和margin的值。

解决办法:在IE6下,单独用element.currentStyle来获取对应的height则不会包含padding和margin的值。

下面的代码可以提供比较完整的测试来验证以上的结论,jQuery版本对应的是1.4.1:

<!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" >
<head>
    <title>jQuery.height()</title>
    <script src="jQuery/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        .v_container{width:300px; height:300px; background-color: Red;}
        .v_header{width:300px; height:100px; padding-top:50px; background-color:Yellow;}
        .v_body{width:300px; height:100px; margin-top:50px;background-color:Green;}
        .v_footer{width:300px; height:100px;padding-top:50px; background-color:Gray;}
    </style>
</head>
<body>
    <div id="container" class="v_container">
        <div class="v_header"></div>
        <div class="v_body"></div>
        <div class="v_footer"></div>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var jContainer = $(".v_container");
            var jHeader = $(".v_header");
            var jBody = $(".v_body");
            var jFooter = $(".v_footer");
            jContainer.height();
            alert([jContainer.height(), jHeader.height(), jBody.height(), jFooter.height()].join(','));
            var container = document.getElementById('container');
            var computedStyle = null;
            if (window.getComputedStyle) {
                computedStyle = window.getComputedStyle(container);
            }
            else if (container.currentStyle) {
                computedStyle = container.currentStyle;
            }
            if (computedStyle) {
                alert(computedStyle["height"]);
            }
        });
    </script>
</body>
</html>

原文地址:https://www.cnblogs.com/volnet/p/2007903.html