Is height calculated different between Chrome and Firefox?

Question

So take a look at www.qualificationcheck.com in both Chrome and Firefox. Alt-Tab quickly moves between them, focusing on the small green tab "help and feedback".

Seems to be a moving position! What is it?

Included in it is a third-party Javascript file. I looked at him to find out how he calculates his position.

First, he sets top: 50% to get about 50% of the way down the viewing screen.

Then he sets

margin-top: [ "-",Math.round(tab.dimensions.height / 2), "px" ].join("")

those. minus half the height of the tab, so it moves slightly upward, so the “middle” of it actually makes up 50% of the way down the viewport (not the “top”).

Using the Chrome dev tools and then firebug in Firefox, I see that in Chrome margin-top ends with -33px, and in Firefox it ends up in -87px.

Why is the difference?

It annoys him because I want to add my own tab above or below it, but I cannot determine where to place my own tab, if I cannot rely on a third-party one to be in the same position all the time

Answer 1

Sorry guys, none of the other answers helped.

I solved this by basically copying the third party js and then tweaking it so that I could position it and the new tab together.

So basically just a job, not an answer to a question.

Answer 2

Try adding padding-top :? px, and it should be the same for both Firefox and Chrome. Some people on the net report a similar crash-crash problem (not an error, apparently):

http://www.sitepoint.com/forums/showthread.php?829681-CSS-margins-displaying-differently-on-Firefox-Ie-Chrome

The difference in boundaries between Firefox and Chrome / Safari

Answer 3

Firefox (and Chrome recently) interpret tagging and adding differently. Margin and padding values are added to the height / width of the div . You can fix this (at least for FF) by adding this to your css (put it at the top):

 DIV { -moz-box-sizing:border-box; box-sizing:border-box; }