DOM 元素的像素级别（宽度、高度、...）的浏览器渲染差异答案

【问题标题】：Browser rendering differences at pixel level (width, height, ...) of DOM elementsDOM 元素的像素级别（宽度、高度、...）的浏览器渲染差异
【发布时间】：2016-03-31 00:39:59
【问题描述】：

我正在开发一个应用程序，它比较不同浏览器中呈现的 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"
    }
}

铬

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

chrome 中的 top 值始终是一个整数，而在 firefox 中它是 always 相同的值，但高于 0.5 或 0.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 中它们更短且奇怪地四舍五入。

【问题讨论】：

不同的浏览器对 DOM 元素有不同的默认 CSS 值。您是否尝试过像这样的 CSS 重置？ meyerweb.com/eric/tools/css/reset。这将删除 DOM 元素上的所有默认浏览器 CSS。
这真的是个好主意吗？如果我的目标是找出元素在不同浏览器上的显示是否不同，我不会通过重置一些样式来破坏“未触及”的样式环境吗？我的意思是因为假设我得出结论，在应用重置后两个元素是相同的。这也可能意味着重置导致元素具有相同的样式。
啊，我误解了你的目标。根据我的经验，元素在不同的浏览器上无论如何都会以不同的方式显示——即使只是像素的一小部分。
您能否提供一个 JSfiddle 或任何我们可以测试的东西，以便我们都知道我们正在查看同一个 DOM 树。我的意思是，快速测试不会显示 Firefox 的任何分数输出。
什么样的测试没有显示分数？如果我转到 example.com 并在 firefox 和 chrome 上执行 document.getElementsByTagName("body")[0].getBoundingClientRect() ，它会显示两个具有完全不同值的 json 对象。

标签： html css google-chrome firefox html-rendering

【解决方案1】：

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

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

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

【讨论】：

例如我的例子中的高度差（example.com）是用不同的字体渲染来解释的吗？
嗯，好像是这样。如果您在根元素上使用 getBoundingClientRect 并尝试使用不同的浏览器缩放级别，它将输出不同的高度结果（在根元素与底部相同的情况下，因为高度 = 底部 - 顶部）。另外，如果你把html { height: 100%; } 放在不同的窗口大小上测试输出，你也会得到不同的结果。我从来不知道，这有点有趣:)

【解决方案2】：

不同的浏览器使用不同的样式表。

铬：http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?order=name

火狐：http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css

Reference

尝试使用一些流行的Reset CSS

【讨论】：

我将如何判断样式之间的差异是因为重置还是因为之前已经存在？因为渲染的 DOM 中的差异是我要找到的。