gpt4 book ai didi

javascript - Firefox 的 document.body.getBoundingClientRect().top 不正确?

转载 作者:行者123 更新时间:2023-11-30 13:09:49 25 4
gpt4 key购买 nike

当我在一个根本没有样式的简单站点上向 Firefox 版本 17.0.1 询问 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>

最佳答案

尝试提供您的 <html>黄色背景和你的<body>绿色背景并查看渲染效果。我敢打赌,绿色矩形实际上距离视口(viewport)顶部 22 像素。

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

Chrome 在标准模式下具有完全相同的行为。但是在怪癖模式(他上面的 HTML 片段所在的模式)下,它似乎在 <h1> 的地方做了一些奇怪的事情。仍然报告 21px 的顶部边距,但这个边距不会与 <body> 的顶部边距重叠。 .. 尽管在 <div> 上设置了最高利润率确实与 body 一起崩溃。这是适合您的怪癖模式。

关于javascript - Firefox 的 document.body.getBoundingClientRect().top 不正确?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14286876/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com