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

Question

I work as a front-end developer and I keep getting bugs filed by a UI Designer who says that 2 of my elements are slightly misaligned and need to match the mockup more closely. I've looked at my page a million ways and I can't see how anyone could claim that these 2 boxes aren't perfectly aligned. I've looked in Inspect Element and there are perfect horizontal lines through the tops and bottoms of the boxes. I want some way of "proving" this, though. So I want something like

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

    /* .... */ 
}

to print something like

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

to the console, where the pixels are the absolute position with respect to the whole page (or the body , I suppose). Is this possible, and if so, how do I implement it?

Answer 1

You will be wasting your time if all you have to go off of is a description of "slightly misaligned".

Politely ask the UI Designer to provide a screenshot of the issue they are seeing.

Additional information that will be helpful is:

1. Operating System / Version
2. Browser / Version
3. Device / Resolution
4. Browser addons
5. Browser settings that are not default

It is most likely that you are both seeing different things and if you cannot reproduce it, you cannot fix it. It is important for you to mimic their environment as closely as possible.

Now, if for some reason they cannot provide a screenshot and if you do want go down the route of proving what you see is correct and they are not (which is not a good use of time) you can use the following JavaScript to get the pixel coordinates of your elements on the screen.

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

The values returned by element.getBoundingClientRect() are relative to the viewport.