Why some fonts size are not consistent across browsers?

Consider the following example: (live demo here)

HTML:

<div>Hello World</div>

CSS:

div {
    font-family: monospace;
    font-size: 1em;
}

JS:

$(function() {
    alert($("div").css("font-size"));
});

In Firefox, the font size is 16px, while in IE8 the font size is 13px.

Why ?

(I tried to change the开发者_运维问答 font-family to Arial, and both Firefox and IE8 say 16px.)

---

Each browser is a different product by a different company, they program their product differently, and font size is one of them. From this link, 1 em is equal to the current font size, which maybe different for different browsers, also user can change it, i have changed the text size to largest in IE, and the font size is now 21.33 px.

Using em means it is dependent on a lot of things, use %age for consistency.

1 em will be different for different browsers (depending on their default or of user has changed it). For example you said IE has font size of 13 px and firefox has 16 px, when i checked, firefox had 13 px and IE has 16 px, which was changed to 21.33 px when i changed the text size to largest (view -> text size)

---

Because em is a relative unit. An em is equal to the current font-size. If the font-size of the document is 16pt, 1 em is equal to 16pt.

MSIE seems to think that monospace doesn't need to be as big as Arial (in pixels) to be readable. For example, 12pt Times New Roman is about a big as 10pt Arial.

If you want fixed font sizes, use font-size: 16pt.

---

Because its an implementation choice. For instance, firefox has a configuration option to set the default font face and sizes for Sans, Serif and Monospace.

---

Because Firefox builders messed up in how they coded "monospace". To get "monospace" to work properly in Firefox you need to type "monospace,;" not "monospace;".

I kid you not. It is that simple of a problem.

Check it out for yourself. Change your css style to have a comma after the "monospace" and before the semicolon and watch how dramatically it instantly changes the way that text appears.

Conventional belief was that you needed to have it type "monospace, monospace;" to work but they were wrong. That second "monospace" was meaningless, only the comma mattered. Which actually means you could have put anything there and it would have worked. So if you wanted to leave a funny easter egg in your code you could do something like "monospace, hellofromthecoder;" and it would function perfectly fine without that extra bit of text changing anything.