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"
    }
}

铬

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

chrome中的 top 值始终为整数，而在firefox中，始终的值相同，但是.5或.25更高。

高度要么比铬要高1或.5。

所有其他值有时是两个浏览器中的分数。如果它们是分数，它们永远不会相等（firefox总是具有更高的值）。如果它们是整数，则它们是相同的。

我永远不会想到这样的事情。特别是顶部和高度值的奇怪之处。我认为渲染只是不同，这导致（不规则!!）不同的像素值。

所以我的问题是：如果我进行这种比较，我可以从中得出任何规则吗？有谁知道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

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

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

Answer 2

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

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

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

Reference

尝试使用少数热门Reset CSS

浏览器渲染DOM元素的像素级别（宽度，高度等）的差异

2 个答案: