Why is font-size: 16px bigger in Internet Explorer 11 than in FireFox? [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.

Closed 9 years ago.

Improve this question

As viewed in Firefox 29:

As viewed in Internet Explorer 11:

I tried using em and % but the same result. Internet Explorer is always bigger than FireFox (tested Internet Explorer 8, 9, 10 and 11, all the same). Tried changing Internet Explorer text size under view in the menu with no results there either.

CSS is a modified _s for WordPress and this is inside #primary-navigation.

Edits per comments:

• Zoom is set to 100% (across browsers).
• Chrome looks fine.
• IE text size is set to medium.

EDITS 2016-12

Many comments requesting the actual CSS. The original CSS has been lost to time but font-family was indeed the issue. This is the corrected portion which uses Google fonts with a number of fallbacks which the client has approved.

ul.menu a {
    display: block;
    padding: 0 5px 0 5px;
    font-family: 'Noto Serif',Palatino,"Palatino Linotype",Georgia,serif;
    font-size: 0.8em;
    font-style: italic;
    line-height: 29px;
    text-decoration: none;
    text-shadow: 1px 1px 0px rgba(255,255,255,0.75);
}

Answer 1

The browsers are using different font faces. You can see this by comparing the glyphs. For example, the letter “l” is clearly different. The font size is the same, but the font designs are different. It is up to font designer to decide how big glyphs are relative to the font size.