1

document.body.getBoundingClientRect().top;当我在一个根本没有样式的简单网站上询问 Firefox 版本 17.0.1时，它返回错误的值。我期望8，这是浏览器的默认设置，但它给了我21.4. 然而，.left偏移量是正确的。

在 Chrome 中，偏移量可以正常工作，并为我8提供了顶部和左侧。

我附上了一个截图，你可以看到顶部不应该是22.4.情况截图

这是HTML

<html><head>
<title>Index</title>
<style type="text/css"></style></head>
<body>
    <div>
        <h1>Index</h1>
        <p>This is the index. The site contains in total 4 sites without
            any Javascript. They are linked using href links.</p>
        <p>The site looks like this:</p>
        <ul>
            <li>Index ->; a</li>
            <li>Index ->; b</li>
            <li>b ->; c</li>
            <li>c ->; b</li>
            <li>c ->; Index</li>
        </ul>
    </div>
    <a href="a.html">Go to A</a>
    <a href="b.html">Go to B</a>
</body></html>
4

2 回答 2

2

尝试给你<html>的黄色背景和<body>绿色背景，看看渲染的样子。我敢打赌，绿色矩形实际上是距视口顶部 22px 的地方。

发生这种情况的原因是 body 的 8px 上边距与您的 22+px 上边距折叠在一起<h1>，因为这些边距是相邻的。见http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Chrome 在标准模式下具有相同的行为。但是在 quirks 模式下（上面的 HTML 片段所在的模式），它似乎做了一些奇怪的事情，<h1>仍然报告 21px 的上边距，但这个边距并没有与<body>..<div>将其与身体一起坍塌。这就是你的怪癖模式。

于 2013-01-12T06:22:51.777 回答
1

我刚刚使用带有以下代码的 Firefox 18 进行了尝试，我得到了预期值 8（为了清楚起见，我取出了所有格式，但它给出了相同的 8 值）。

<html>
<head>
<title>Index</title>
<script>
    window.onload = function () {
        document.getElementById("getBoundingClientRectTop").innerHTML = document.body.getBoundingClientRect().top;
    }
</script>
</head>
<body>
    <span id="getBoundingClientRectTop">???</span>
</body>
</html>
于 2013-01-11T21:46:41.403 回答