我似乎发现了一个奇怪的边缘情况，似乎子元素使用父宽度作为上边距百分比而不是高度。
它也发生在chrome和firefox上，这是预期的行为吗？如果是这样，为什么高度会从宽度中得出？
要查看错误，请将浏览器设置为高于宽度，然后打开下面的代码。
我希望儿童div不在屏幕上但不是。如果浏览器宽度超过它的高度，则div比屏幕更远。如果浏览器完全是正方形，它只在正确的位置。
<html>
<head>
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
div.parent {
position: absolute;
width: 200%;
height: 100%;
}
div.a {
position: absolute;
background-color: red;
width: 50%;
height: 100%;
}
div.child {
background-color: orange;
margin-top: -100%;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parent">
<div class="a">
<div class="child">
</div>
</div>
</div>
<script type="text/javascript">
why = $('.child').position().top + $('.child').height()
console.log(why)
what = $('.child').position().top + $('.child').width()
console.log(what)
</script>
</body>
</html>
答案 0 :(得分：3)
从CSS框模型规范：
8.3 Margin properties：＆＃39; margin-top＆＃39;，＆＃39; margin-right＆＃39;，＆＃39; margin-bottom＆＃39;，＆＃39; margin-left＆＃ 39;和＆＃39; margin＆＃39;
... 百分比是根据生成的包含块的宽度计算的。请注意，对于＆＃39; margin-top＆＃39;和＆＃39; margin-bottom＆＃39;同样。
有点奇怪，但我确定他们有理由。