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 は、標準モードでもまったく同じ動作をします。<h1>しかし、Quirks モード (上記の HTML スニペットが入っているもの) では、が 21 ピクセルの上部マージンをまだ報告しているが、このマージンは<body>..のマージンと一緒に折りたたまれ<div>ないという奇妙なことをしているように見えます。本体と一緒に折りたたむ。それはあなたのための癖モードです。

于 2013-01-12T06:22:51.777 に答える
1

次のコードでFirefox18を使用して試したところ、期待値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 に答える