Question

<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样式的字体将具有相同的大小。但是，为什么在font-size样式中使用body，如上所述，只有“桌面外的文字”。受到尺寸变化的影响？是不是所有内容都封装在<body>？

中

我需要添加

table {
    font-size: 1em;
}

为了在我的表格中制作字体，请遵循body的字体大小。为什么我的页面中的其他<div>不是这种情况？那些<div>确实很好地遵循body的{{1}}。

Answer 1

您的网页正在Quirks Mode呈现，可能是因为它在开头没有doctype字符串，或者以doctype字符串解释为非标准字符串开始。

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

如果这是一个旧页面，最好使用这些怪癖，只需显式声明表格的字体属性，例如：与

body, table { font-size: 14px }

（并不是说我会推荐这种不灵活性）。

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

Answer 2

事实证明，Chrome的默认CSS样式“用户代理样式表” for table 正在使用font-size: medium;，并且已应用于我的table（其中没有{ {1}}）

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

我想除了将table样式添加到表（理想情况下为medium值）之外，没有更好的方法可以阻止它。应用样式后，默认的CSS规则无法使用。

除非我添加1em，否则为什么body中的font-size不会影响表中的字体？

2 个答案: