CSS 正文字体适用于 fiddle，为什么 Safari 或 Firefox 不行？

Question

我正在学习 CSS，我还没有弄清楚为什么我的 "body {font-size...}" 参数在 table 标签内似乎不起作用。

我所追求的结构在 fiddle 上运行良好；但是，当我将它们全部放在一个 HTML 文件中时...

<html>
<head>
<style>
body {font-size:80%; font-family: Courier, monospace}
</style>
</head>
<body>
<p>This text is outside the table.</p>
<table>
<caption>Inside</caption>
<tr><th>Inside</th></tr>
<tr><td>Inside</td></tr>
</table>
<p>Outside</p>
</body>
</html>

...OSX 11.6 中的 Safari V11.0 和 Firefox V56.0 都将文本 outside 渲染为 80%，这我预料到了，但是 inside 中的文本 table 以 100% 呈现：

Both Safari and Firefox render the above HTML the same

"font-style" 参数显然有效：如果我删除它，table 内容将以某种比例字体呈现。

如果我改用字体 shorthand...

body {font:80% Courier, monospace}

...我得到相同的结果。

对我还需要学习的东西有什么建议吗？

--吉尔

Answer 1

来自HTML 5 spec, Rendering section

In quirks mode, the following rules are also expected to apply:

@namespace url(http://www.w3.org/1999/xhtml);


table {
  font-weight: initial;
  font-style: initial;
  font-variant: initial;
  font-size: initial;
  line-height: initial;
  white-space: initial;
  text-align: initial;
}

您的页面没有文档类型，因此它处于怪异模式，因此 table 的字体大小（以及其他字体设置）正在重置。 Fiddles 始终使用标准模式，因此不会重置字体大小。

将 <!DOCTYPE html> 添加到文件的顶部。

CSS 正文字体适用于 fiddle，为什么 Safari 或 Firefox 不行？

CSS body font works on fiddle, why not Safari nor Firefox?

css

safari

firefox

font-size