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

Answer 2

我之前的回答有效，但我不相信它是出于正确的原因。

调整pre和code的大小有效并且看起来不像是黑客：

替换

table.code pre > code {...

使用：

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

UPDATED DEMO fiddle

当我的font-size为62.5％且height为1.6rem时，为什么font-height等于20px？

2 个答案: