html - 为什么我的 font-size 是 62.5% 高度是 1.6rem 时 font-height 等于 20px？

Question

我使用的是 Chrome 浏览器，我的 html 设置如下:

html {
font-size: 62.5%;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

据我了解，这通常意味着 1rem 等于 10px。我在下面有更多的 CSS:

table.code pre > code {
margin: 0;
font-family: "xxxConsolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-size: 1.6rem;
}

HTML:

<table class="code">
   <tbody>
      <tr>
         <td>01</td>
         <td><pre><code>xxx</code></pre></td>
      </tr>
   </tbody>
</table>

但是文本看起来很大，当我检查它时它等于 20px。

谁能解释一下发生了什么？

Answer 1

您需要规范化基本字体大小，而不仅仅是 html元素。 <code>正在从 <pre> 继承一些尺寸.

html, pre {
    font-size: 62.5%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}

DEMO fiddle