zoukankan      html  css  js  c++  java
  • 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>
    
    
  • 相关阅读:
    二人pk答题小程序
    题解【CF911F】Tree Destruction
    题解【洛谷P5765】[CQOI2005]珠宝
    WC2021 游记
    生产环境财务BUG的排查与总结
    生产环境一个订单状态错误的排查与反思
    《HeadFirstServletAndJsp》笔记一
    Java泛型简介二
    Java泛型简介一
    在Windows环境下与Linux环境下快速计算文件Hash
  • 原文地址:https://www.cnblogs.com/volnet/p/2007903.html
Copyright © 2011-2022 走看看