
In the screenshot above, Google Chrome’s (element/web) inspector tool shows that the dimensions of a menu-item are 547 by 308 pixels.
Now, can I be sure that all modern browsers (IE9 and above, Chrome, Opera, Firefox) also recognize the menu-item by those very same dimensions? If not, how does it vary? (e.g. font-rendering?)
EDIT: I do you use a CSS reset stylesheet. To be more specific, I use Normalize.css, which is quite popular.
Unless you specified
width: 547px; height: 308pxthen no. If you’re allowing the element to shrink and grow based on the size of the descendant elements (and the descendant’s dimensions are not constrained by a fixed width or height), then it will vary.You can never be certain how the user has configured their browser in terms of font-size (some users like a larger font-size so it is easier to read). You can’t even be certain the user has the font-family specified, and their default font-face might have wider or narrower glyphs than what you’re expecting.