html 像素偏差,html – DOM元素的像素级(宽度,高度,…)的浏览器渲染差异

我正在开发一个应用程序,用于比较不同浏览器中呈现的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中的最高值始终是整数,而在firefox中,它始终是相同的值,但要高出.5或.25.

高度要比铬高1或0.5.

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

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

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

更新：

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