当`offsetParent`是`body`元素时，`offsetLeft`返回假值答案

【问题标题】：When `offsetParent` is `body` element, `offsetLeft` return false value当`offsetParent`是`body`元素时，`offsetLeft`返回假值
【发布时间】：2021-12-19 15:07:08
【问题描述】：

代码是这样的：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html {
        border: 1px solid black;
        padding: 0;
      }
      body {
        width: 100px;
        height: 100px;
        border: 10px solid red;
        padding: 10px;
        margin: 10px;
      }

      div {
        width: 100px;
        height: 100px;
        border: 10px solid black;
        padding: 10px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <div id="div"></div>
  </body>
</html>

为什么div元素的offsetLeft值是offsetLeft是41？应该是 div.leftMargin + body.leftPadding = 20px。

这是 chrome 错误还是我误解了 offsetLeft？

【问题讨论】：

你的html有边框
@DanielA.White 但它不应该影响结果，因为offsetParent 是body 元素。

标签： javascript css dom

【解决方案1】：

Chrome 和 Firefox 似乎对事物的解释有所不同。

来自MDN：

HTMLElement.offsetParent 只读属性返回对距离最近（包含层次结构中最近）定位的祖先元素的元素的引用。如果没有定位的祖先元素，则返回最近的祖先 td, th, table，如果没有祖先 table 元素，则返回 body。

但是，在这种情况下，Chrome 似乎没有使用 body 作为最近的祖先，而是回到了 html 元素。如果你给 body 元素一个 position: relative 那么 Chrome 给出的 leftOffset 为 30。

这是一个可以玩的 sn-p - 尝试不同的盒子尺寸和不同的身体定位。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      box-sizing: border-box;
    }
    
    html {
      border: 1px solid black;
      padding: 0;
    }
    
    body {
      width: 100px;
      height: 100px;
      border: 10px solid red;
      padding: 10px;
      margin: 10px;
    }
    
    #div {
      width: 100px;
      height: 100px;
      border: 10px solid black;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>

<body style="position: relative;">
  <div id="div"></div>
  <script>
    alert(document.querySelector('#div').offsetLeft);
  </script>
</body>

</html>

所以，我意识到这更像是一个扩展的评论/观察，而不是一个完整的答案，但对于评论来说太长了。希望其他人可以充分解释和/或找到对潜在 Chrome 错误/不同解释的参考。

【讨论】：

为什么结果是30？ offsetLeft 应该是 body 的 padding + Div 的 margin，应该是 20px。