Question

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

在Chrome中，偏移量工作正常，并为我提供8左上角。

我附上了一个屏幕截图，您可以看到顶部不应该是22.4. Screenshot of the situation

这是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>

Answer 1

尝试为<html>提供黄色背景，将<body>设为绿色背景，然后查看渲染效果。我敢打赌绿色矩形实际上距视口顶部22px。

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

Chrome在标准模式下具有相同的确切行为。但是在quirks模式（他的上面的HTML片段是什么）中，似乎做了一些奇怪的事情<h1>仍然报告21px的上边距但是这个边距不会与<body>的边缘一起崩溃..虽然在<div>上放置一个上边距会使身体崩溃。那是你的怪癖模式。

Answer 2

我刚刚使用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>

Firefox的document.body.getBoundingClientRect（）。top不正确？

2 个答案: