本帖暂时只描述现象吧,其实要在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>