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

Question

我作为前端开发人员工作，并且不断收到UI设计师提交的错误，该设计师说我的两个元素略有不一致，需要更紧密地匹配模型。 我已经以一百万种方式查看了我的页面，但看不到有人能声称这两个框未完全对齐。 我查看了Inspect Element，并通过框的顶部和底部有完美的水平线。 不过，我想要某种“证明”的方式。 所以我想要像

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（）返回的值是相对于视口的。