为什么正文中的字体大小不会影响表格中的字体，除非我添加 1em？答案

【问题标题】：Why font-size in body does not affect font in a table unless I add 1em?为什么正文中的字体大小不会影响表格中的字体，除非我添加 1em？
【发布时间】：2013-12-17 05:23:00
【问题描述】：

<style>
body {
    font-size: 14px;
}
</style>

<body>
Text outside table.
<table>
    <tr><td>Text inside table.</td></tr>
    <tr><td>Text inside table.</td></tr>
    <tr><td>Text inside table.</td></tr>
</table>
</body>

我正在尝试为我的网站指定基本字体大小，因此在其他地方我可以使用百分比或 em 来指定大小。

上面的 html 代码，如果没有body 样式，字体将是相同的大小。但是，为什么在body 样式中使用font-size，就像上面一样，只有“表外的文本”。受到尺寸变化的影响？不是全部都封装在<body>中了吗？

我需要添加

table {
    font-size: 1em;
}

为了使我的表格中的字体遵循body 的字体大小。为什么这与我页面中的其他<div>s 不同？那些<div>s 确实很好地关注了body 的font-size。

【问题讨论】：

没有看到它：jsfiddle.net/tAypJ 您必须为正在干扰的表设置另一个规则（右键单击 -> 检查元素以查看 CSS 规则。）
奇怪的是 O_o jsfiddle 返回不同的结果。在 Chrome (OSX Lion) 中它看起来像这样：dropbox.com/s/6dvx640oornxauq/…
也许你有一个扩展或干扰的东西。尝试以隐身模式或检查元素以查看适用于表格的 CSS 规则。
有“用户代理样式表”删除了我的字体大小并将其替换为“中等”必须查看它..

标签： html css fonts font-size

【解决方案1】：

您的页面正在以Quirks Mode 呈现，可能是因为它在开头缺少doctype 字符串或以被解释为非标准的doctype 字符串开头。

它是 quirks 模式的一部分，即使在“HTML5 quirks 模式”（试图标准化一些常见的怪癖）的有限意义上，表格也不会继承字体属性。这是在 HTML 5 中的一个关于rendering tables 的子句中正式定义的。那里的定义使用了 initial 关键字，这还不是很标准，但它只是表示 CSS 规范中定义的属性的初始值。对于font-size，确实是medium。

如果这是一个旧页面，最好忍受这些怪癖，并明确声明表格的字体属性，例如与

body, table { font-size: 14px }

（并不是说我会推荐这种不灵活的方式）。

如果这是关于您正在创建的新页面，请将 <!doctype html> 放在开头并始终使用“标准”HTML 和 CSS。

【讨论】：

【解决方案2】：

原来 Chrome 的默认 CSS 样式“用户代理样式表”for table 使用的是font-size: medium;，并且应用于我的table（其中没有任何font-size）

因此，该 CSS 规则用于忽略我的body 的font-size，因为table 的层次结构更深，medium 的大小将优先。

我想除了在表格中添加font-size 样式（理想情况下使用1em 值）之外，没有更好的方法来防止它。应用样式后，将无法使用默认 CSS 规则。

【讨论】：