I am using google prettify to highlight code on my website. To be HTML 5 conform I use:
<pre class="prettyprint"><code class="language-java"></code></pre>
To modify the used font and size I added to my css:
code { font: normal 400 1.2rem/1.5 'Roboto Mono', monospace; }
I tested it with IE-Edge and Firefox and all was fine. Later I have seen, that Chrome was accepting the font(-family) but not the size (bigger than expected). While IE and Firefox inherited the the size from <html> as expected.
Meanwhile I made a small workaround and additionaly added:
pre { font: normal 400 1.2rem/1.5 'Roboto Mono', monospace; }
Using <pre> alone is no option, because then IE and Firefox don't accept the font(-family), while Chrome does, but now he makes the size smaller than expected.
That IE often has different behavior than other browsers is known, but in this case Chrome acts differently. Is the redundant code used in preand codethe only "solution here?
答案 0 :(得分：1)
<pre> and <code> are both part of the HTML 5 spec. There is no need to use both.
For font-related problems, it's a bit complicated, see this article.