浏览器渲染DOM元素的像素级别(宽度,高度等)的差异

Question

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

我通过element.getBoundingClientRect()计算元素的实际位置,如下所示:检索html元素的位置xy.

我在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中的最高值始终是整数,而在firefox中,它始终是相同的值,但要高出.5或.25.

高度要比铬高1或0.5.

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

我从来没有想到过这样的事情.特别是顶部和高度值的奇怪之处.我会想,渲染只是不同,这导致(不规则!!)不同的像素值.

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

更新:

如果您想快速查看,请访问http://example.com/(因为它有一个非常小的DOM)并document.getElementsByTagName("body")[0].getBoundingClientRect()在firefox和chrome上输入javascript控制台.Y,高度和顶部值在firefox中是疯狂的长浮点值,而在它们中更短并且在chrome中奇怪地舍入.

Answer 1

ClientRect()的返回值是TextRectangle,请参见:https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMClientRect

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

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