如何向UI设计师证明2个div具有相同的高度和垂直位置？

Question

我是一名前端开发人员，我不断收到UI设计人员提出的错误，他们说我的两个元素略有错位，需要更紧密地匹配模型。我已经看了一百万种方式，我无法看到有人声称这两个盒子没有完全对齐。我看过Inspect Element，盒子的顶部和底部都有完美的水平线条。我想要一些＆＃34;证明＆＃34;不过这个。所以我想要像

这样的东西

function( var id1, var id2 )
{
    /* id1, id2: identifiers of the 2 divs */

    /* .... */ 
}

打印类似

的内容

vertical position of top and bottom of first div: 162px, 180px
vertical position of top and bottom of second div: 162px, 180px

到控制台，其中像素是相对于整个页面的绝对位置（或者body，我想）。这是可能的，如果是这样，我该如何实现呢？

Answer 1

如果你所要做的只是“略微错位”的描述，你将浪费你的时间。

礼貌地要求UI设计师提供他们所看到的问题的屏幕截图。

有用的其他信息是：

1. 操作系统/版本
2. 浏览器/版本
3. 设备/分辨率
4. 浏览器插件
5. 非默认的浏览器设置

你最有可能看到不同的东西，如果你不能重现它，你就无法解决它。尽可能地模仿他们的环境非常重要。

现在，如果由于某种原因他们无法提供屏幕截图，如果你确实想要证明你所看到的是正确的，而他们不是（这不是很好的时间），你可以使用以下JavaScript获取元素在屏幕上的像素坐标。

var myElem = document.getElementById('id1').getBoundingClientRect(); console.log(myElem.top, myElem.right, myElem.bottom, myElem.left);

element.getBoundingClientRect（）返回的值是相对于视口的。