html - DOM 元素在像素级别(宽度、高度...)的浏览器渲染差异

Question

我正在开发一个应用程序，该应用程序比较不同浏览器中呈现的 DOM 以找出差异。我将其视为进行屏幕截图比较的替代方法。此外，这可以通过编程方式完成，误报更少(至少我是这么想的)。

我按照此处的建议通过 element.getBoundingClientRect() 计算元素的实际位置:retrieve the position x y of an html element .

我在 Firefox 和 Chrome 上尝试过，并从中生成了一个 JSON DOM 结构。现在我真的很困惑我得到了什么。我知道浏览器在子像素级别上处理像素值的方式不同，但它并不像 Chrome 总是有四舍五入的数字而 Firefox 总是有分数。它几乎总是这样:

火狐

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390.5",
      "left": "824.61669921875",
      "width": "123.38333129882812",
      "height": "27"
    }
}

Chrome

{
    "name": "SPAN",
    "style": {
      "display": "block",
      "top": "1390",
      "left": "824.640625",
      "width": "123.359375",
      "height": "27"
    }
  }

chrome 中的 top 值始终是一个整数，而在 firefox 中它始终 是相同的值，但高出 .5 或 .25。

高度 比 chrome 高 1 或 0.5。

在这两种浏览器中，所有其他值有时都是分数。如果它们是分数，则它们永远不会相等(firefox 总是具有更高的值)。如果它们是整数，则它们是相同的。

我从来没想过会有这样的事情发生。特别是关于 top 和 height 值的奇怪之处。我会认为渲染只是不同，这会导致(不规则!!)不同的像素值。

所以我的问题是:如果我进行这种比较，是否可以从中得出任何规则？有谁知道firefox的舍入规则？或者我是否必须进行容忍 比较，检查值之间的距离是否超过 1 个单位？

更新:

如果您想自己快速检查一下，只需转至 http://example.com/ (因为它有一个非常小的 DOM)并在 firefox 和 chrome 的 javascript 控制台中输入 document.getElementsByTagName("body")[0].getBoundingClientRect()。 Y、height 和 top 值在 firefox 中是非常长的浮点值，而在 chrome 中它们更短且奇怪地四舍五入。

Answer 1

ClientRect()的返回值是TextRectangle，看这里:https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect

所有坐标都是相对于视口(viewport)的，它的大小在不同的浏览器中是不同的。浏览器实际屏幕空间(视口(viewport)减去选项卡、工具栏、用户界面等)、子像素渲染的不同算法、字体渲染、内联 block 元素周围的空白大小(取决于默认字体大小)——这些都是影响视口(viewport)的因素尺寸，可能还有更多。更重要的是，这些因素经常随着每个新浏览器版本的不同而变化(加上用户可以更改设置)，因此任何通过比较计算值得出的规则可能值(value)有限(如果有的话)。

至于处理子像素值，我建议始终使用 Math.floor 来防止任何不必要的布局破坏或调整设计以针对浏览器变化更加灵活。