Possible FireFox font-size bug

Possible FireFox font-size bug: does not honor CSS font-size for code tag wrapped in pre.

by Erik Neumann

HTML

<body>

<h1>Possible FireFox font-size bug</h1>

<p>Possible FireFox font-size bug: does not honor CSS font-size for code tag wrapped in pre.
</p>

<p>This shows an inconsistency among browsers in handling font-size (on Mac OS X 10.11.4).</p>

<p>Without any added style the 3 browsers show same results: the code tags are all shown in a smaller size than the regular text.</p>

<p>Adding the single style <code>code { font-family: Courier; }</code> (as done on this page) results in:</p>

<ul>
  <li>Safari, Chrome: the code tags all have same size, now larger, same size as regular text.</li>
  <li>FireFox: the code tags are larger as in the other browsers, except within the pre tag (the text "problem here" below), where the code tag is still in the smaller size.</li>
</ul>

<hr>

<p>Here we have a <code>pre</code> followed by <code>ul li p</code>:</p>

<pre>Start of pre section 
  <code>**problem here!** Middle of pre section is also wrapped in code tag</code>
End of pre section</pre>

<ul>
<li><p><strong>Item 1</strong> <code>text wrapped in ul, li, p, code</code> Regular text wrapped in ul, li, p.</p></li>

<li><strong>Item 2</strong> <code>text wrapped in ul, li, code</code> Regular text wrapped in ul, li.</li>

</ul>

<p>There is a simple fix for the font-size problem which is to add <code>body { font-size: 16px; }</code></p>

</body>

CSS

code {
        font-family: Courier;
    }