javascript - 当我提到元素的高度和宽度为 100% 时，它会在不同的浏览器中以不同的像素高度呈现

Question

我正在开发应用程序来捕获在不同浏览器中呈现的网页的 Dom。我在浏览器中获取元素的高度和宽度顶部和左侧位置的 json。我发现高度和宽度的差异取决于浏览器工具栏等。当我提到 html 的 css 时，body 为 100%。

例如: Chrome

{
  "elementName": "BODY",
  "xpath": "/html/body",
  "top": 0,
  "left": 0,
  "width": 1350,
  "height": 100,
  "absX": 8,
  "absY": 18
}

eg : Firefox 

  {
    "elementName": "BODY",
    "xpath": "/html/body",
    "top": 0,
    "left": 0,
    "width": 1350,
    "height": 120,
    "absX": 8,
    "absY": 18
 }

在这里你可以看到，与 chrome 相比，firefox 中 body 的高度多了 20px。所以我的问题是如何使所有浏览器的宽度和高度相同，或者如何忽略高度差异。

Answer 1

I think this is because different browsers have different default line-heights, so if you set your element to a specific line-height, it will look the same on all browsers.