Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre

Why does Firefox not honor CSS font-size for code tags wrapped in pre?

This issue is not new; it has been known for many years that browser handling of monospace fonts is incredibly screwy and inconsistent across browsers. A number of workarounds are available that don't require you to override the monospace font preference set by the user, the most perplexing of which is to specify

font-family: monospace, monospace;

That's right: two monospace keywords at the end of the font stack. Nobody knows why this works; it just does.

For what it is worth, Firefox's UA stylesheet contains references to a -moz-fixed keyword which refers to the preference that is set by the user, which includes both the family and the size despite it being a value for the font-family property. Firefox ships with the preference set to 13px in whichever the system's default monospace font is. It would seem that monospace, monospace forces the browser to compute the element's font-size according to the spec while still preserving the preferred monospace family, at least. But this is just a guess.

Is this a bug? It depends on whom you ask. If you ask browser vendors, they'll probably say this is intentional. If you ask other authors, they'll probably also call it a bug. Is this a spec violation? No, because the spec allows browsers to implement defaults however they like.

CSS body font works on fiddle, why not Safari nor Firefox?

From the HTML 5 spec, Rendering section

In quirks mode, the following rules are also expected to apply:

@namespace url(http://www.w3.org/1999/xhtml);

table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

Your page has no doctype, so it is in quirks mode, and therefore font-size (among the other font settings) for the table is being reset. Fiddles always use standards mode and therefore don't reset the font-size.

Add <!DOCTYPE html> to the top of your file.

Why does textarea not accept relative font-size if none of it's parent has fixed size? (Firefox 18.0 Mac)

In Firefox (I don't know if other browsers have that too) you have the possibility to set two default font-sizes:

Default font-size (16px)
Default font-size for text having the generic font-family monospace (13px)

Since the default font-size in my example is just 1em (for the textarea and the body) it's 1 times the default font-size which is 13px for all monospaced text and 16px for all other text.

Here is an article that has a great explanation and also a usable work-around to this:
http://meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/

getPropertyValue('font-size') returns different value for firefox and chrome

The following code works on firefox as well:

function checkminfont() {
var m = '<div id="min-font-size-tester"';
m += ' style="font-size: 2px; line-height: 1;';
m += ' display: none;">M</div>';
$('body').append(m);
minsize = $('#min-font-size-tester').height();
alert(minsize);
}

my thanks to Bobby Jack: http://www.fiveminuteargument.com/minimum-font-scaler

How does increasing a browser's default font size work?

Increasing the browser's default font size only means the browser will use a larger font size when no font size is otherwise specified.

If nothing on a page specifies a font-size the browser's default is used, so that larger font size will be used. Once you specify a font-size on something, that is the font size used on that element and its descendants.

If you specify that font-size on the html element, everything is a descendant of that, so everything has a specified font size, so the browser's default size is not used.

If you specify a font-size further down the DOM tree then the default size will be used until a specified size is encountered, if the specified size is a relative size it is relative to the current size, which could be the browser's default; for example:

<body>
    <div>
        <!-- the text below is the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
    <div style="font-size: 16px">
        <!-- the text below is 16px *regardless* of the browser's default -->
        <p>Some text in another paragraph</p> 
    </div>
    <div style="font-size: 2em">
        <!-- the text below is twice the browser's default size -->
        <p>Some text in a paragraph</p>
    </div>
</body>

Chrome and other browsers may also have a setting for the minimum font size; fonts specified in a page that are smaller than the minimum will be increased to the minimum — but that is not part of a standard and will (probably) be browser dependent.

Why some fonts size are not consistent across browsers?

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)

Does declaring font-size twice on an element have an effect?

Yes it does override it. In this case the second declaration will take precedence.

Why Does Firefox Not Honor CSS Font-Size for Code Tags Wrapped in Pre