时间戳

首页 > 解决方案 > UL 标签导致 chrome 中出现意外的 clientHeight（或 scrollHeight）

javascript - UL 标签导致 chrome 中出现意外的 clientHeight（或 scrollHeight）

问题描述

我不希望下面的clientHeight和scrollHeight有所不同。有什么我不知道的。我只能保证它们在 chrome 上是不同的。不确定人们在不同浏览器中的体验。

每当我在 chrome 中包含一个 UL 标记时，它都会抛出这些值，无论它放在被测量的包含元素中的什么位置

编辑：他们在 Safari 中报告是平等的。那么我可以假设这是一个错误还是 Safari 错了？ 默认情况下，两个浏览器中的边距填充等都是相同的

这个问题与它们之间的区别无关，我在不同的浏览器中得到不同的结果，文档的任何其他答案也不是暗示

在 Safari 中，它们都是 18px，在 Chrome 中，scrollHeight 是 34，clientHeight 是 18

它们不应该都是 34px，或者至少与 Safari 中的 18 相同吗？

泰！

console.log(document.body.clientHeight);
console.log(document.body.scrollHeight);
<ul><li>test</li></ul>

标签： javascripthtml

解决方案

似乎是margin-block默认属性<ul>（您不需要<li>在里面）影响滚动高度。如果您将 margin-block 设置为零，您应该会看到相同的测量值。

有趣的是，在这个片段中，尺寸仍然相差一个像素，但在 codepen 上测试它显示相同的数字。

console.log(document.body.clientHeight);
console.log(document.body.scrollHeight);
ul {
      margin-block-end: 0;
      margin-block-start: 0;
}
<ul><li>test</li></ul>

推荐阅读