代码如下
<html>
<head>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log($("#in")[0].offsetParent == $("#out")[0]);//false
console.log($("#in")[0].offsetParent == $("body")[0]);//true
});
</script>
<style>
#out{
width:200px;height:200px;
border:1px solid red;
margin-top:5px;
padding-top:3px;
}
#in{
padding:10px;
width:100px;height:100px;
background-color:#DEDEDE;
border:1px solid yellow;
}
</style>
</head>
<body>
<!--经测试,in的包含块是body -->
<div id="out">
<div id="in">
this is a test
</div>
</div>
</body>
</html>
按照书上说的,网上写的,自己也查了相关标准,默认的static元素和relative元素的包含块是离它最近的块元素祖先或单元格祖先货行内块祖先。div.out和div.in都是块元素,那么div.in的包含块就应该是div.out,但是经过测试,在chrome和火狐的最新版本中,div.in的包含块是body。在IE8中是div.out。难道说CSS最新标准中关于包含块的部分改了?哪位高手给解释下,谢谢