0

我正在使用 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 时。

有人可以解释发生了什么吗？

4

2 回答 2

1

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

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

演示小提琴

于 2013-10-08T12:08:57.153 回答
0

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

调整大小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;
}

更新的演示小提琴

于 2013-10-08T12:47:14.777 回答