Home/ Questions/Q 9154521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:26:26+00:00

When I ask Firefox version 17.0.1 for document.body.getBoundingClientRect().top; on a simple site that has

  • 0

When I ask Firefox version 17.0.1 for document.body.getBoundingClientRect().top; on a simple site that has no styling at all, it returns the wrong value. I expect 8, which is the browser default, but it gives me 21.4. The .left offset however is correct.

In Chrome the offset is works fine and gives me 8 for both top and left.

I attached a Screenshot of the situation where you can see that the top shouldn’t be 22.4.Screenshot of the situation

Here’s the 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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try giving your <html> a yellow background and your <body> a green background and see what the rendering looks like. I’ll bet the green rectangle is in fact 22px from the top of the viewport.

    The reason that happens is that the 8px top margin of the body is collapsing with the 22+px top margin of your <h1>, because those margins are adjacent. See http://www.w3.org/TR/CSS21/box.html#collapsing-margins

    Chrome has the same exact behavior in standards mode. But in quirks mode (which his what the above HTML snippet is in), it seems to do something weird where the <h1> still reports a 21px top margin but this margin does not collapse with that of the <body>.. though putting a top margin on the <div> does collapse it with the body. That’s quirks mode for you.

    • 0