为啥即使我没有明确设置表格字体大小，表格也不使用正文字体大小？
Posted
技术标签:
【中文标题】为啥即使我没有明确设置表格字体大小，表格也不使用正文字体大小？【英文标题】：Why is a table not using the body font size even though I haven't set the table font size explicitly?为什么即使我没有明确设置表格字体大小，表格也不使用正文字体大小？ 【发布时间】：2011-03-24 06:06:43 【问题描述】：我有一个问题，我将正文字体大小设置为 11 像素，但表格显示的字体为 16 像素。我不知道是什么原因造成的——我一次又一次地浏览了 CSS 和输出（浏览页面时的源代码）。将 table font-size 显式设置为 11px 具有预期的效果，但我不需要将其设置为除正文样式之外的任何位置。
我有以下 CSS：
body
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
margin: 0px;
background-color: #E7D2B8;
color: #863F2B;
img.headerImg
width: 100%;
.menu-strip
float: left;
width: 20%;
.main-content
float: left;
width: 80%;
.clear
clear: both;
ul.menu
margin: 0px;
margin-left: 10px;
padding: 0px;
list-style: none;
ul.menu li
margin: 0px;
padding: 0px;
padding-top: 10px;
padding-bottom: 10px;
div.footer
width: 60%;
margin-left: 20%;
ul.footer-links
list-style: none;
ul.footer-links li
float: left;
padding: 20px;
ul.footer-links li:last
clear: right;
table
width: 100%;
border-collapse: collapse;
td
vertical-align: top;
...输出如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="/CustomerApp_v2/CSS/main.css" />
</head>
<body>
<div class="header">
<img class="headerImg" src="/CustomerApp_v2/Images/header.png" />
</div>
<div class="menu-strip">
<ul class="menu">
<li>Home</li>
<li>Contacts
<ul class="menu">
<li>Customers</li>
<li><a href="/CustomerApp_v2/Agents/Agents.php">Agents</a></li>
<li>Artists</li>
<li>Suppliers</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>
<div class="main-content">
<table>
<thead>
<tr>
<td>Code</td>
<td>Forename</td>
<td>Surname</td>
<td>Address</td>
<td>Postcode</td>
<td>Telephone</td>
<td>Fax</td>
<td>Edit</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan='7'></td>
<td><a href='/CustomerApp_v2/Agents/Edit.php'>Create</a></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>code4</td>
<td>James</td>
<td>Blue</td>
<td>address11<br />address24<br />address32<br />town5<br /></td>
<td>postcode4</td>
<td>fone4</td>
<td>fone2</td>
<td><a href='/CustomerApp_v2/Agents/Edit.php?ID=2'>Edit</a></td>
</tr>
<tr>
<td>code5</td>
<td>Fred</td>
<td>White</td>
<td>address13<br />address24<br />address31<br />town1<br /></td>
<td>postcode2</td>
<td>fone5</td>
<td>fone3</td>
<td><a href='/CustomerApp_v2/Agents/Edit.php?ID=1'>Edit</a></td>
</tr>
</tbody>
</table>
</div><div class="clear"></div>
<div class="footer">
<ul class="footer-links">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</body>
</html>
我真的看不到任何可以在表格中将字体大小设置为 16 像素的东西。这发生在所有 3 个部分（thead、tfoot、tbody）。 Netbeans 6.9 似乎也不会正确格式化表格，但它会完成文档的其余部分（之前和之后）。好像桌子出了什么问题，但我看不出是什么。这发生在 Firefox 和 Opera（两者的最新版本）中。我没有在 IE 中测试过，因为它永远不会在 IE 中使用。
【问题讨论】：
【参考方案1】：浏览器是否以怪异模式呈现？显然，quirks 模式重新创建了一些表无法正确继承的遗留行为：
http://web.archive.org/web/20120718183019/http://devedge-temp.mozilla.org/viewsource/2002/table-inherit/
【讨论】：
他们不应该 - 将浏览器置于怪癖模式，你必须自己做，对吧？如果是这样，那么不，他们不是……我刚刚想到的一件事-可能与文档类型有关吗？只有我在所有这些页面上都使用过 Netbeans 6.9，而且以前从未在任何页面上发生过。我想知道这是否与Netbeans在创建文件时设置的声明有关.. 我是对的 - 我将过渡更改为严格并且效果很好！ DOCTYPE 和 quirks 模式有着千丝万缕的联系——如果您没有使用有效的 DOCTYPE，您的浏览器将以 quirks 模式呈现，至少在 FF 的情况下，使用“quirks”样式表其中包括与您所描述的样式非常相似的样式。 是的，这是正确的。使用正确的 DOCTYPE 来避免触发 quirks 模式将避免该问题。您将在 quirksmode.org/css/quirksmode.html（“表格单元格的字体大小”部分）底部找到关于 quirks 模式下的表格单元格字体大小继承的描述。 感谢您的链接.. 将确保我保存它以防将来遇到更多问题。【参考方案2】：有没有想过为什么即使您不使用任何 CSS 规则，<h1> 看起来也很大？
这是因为网络浏览器内置了默认 CSS 规则。默认 CSS 中包含表格规则。
不幸的是，这些隐藏的 CSS 规则有时会对我们的 Web 开发人员起到恶作剧的作用，这就是人们使用 Reset CSS 的原因。
因此，FireFox 决定在幕后的某个地方添加一条附加规则...
table
font-size:16px; /* actually it's "-moz-initial"
you can check this using FireBug
*/
那么你的规则是……
body
font-size:11px;
这两个规则的specificity 均为 1，因此浏览器可以随意决定哪个优先。
所以，要解决这个问题，要么自己定位表：
table
font-size:11px;
...或者增加你的规则的specificity。
html body /* increased specificity! */
font-size:11px;
...或者使用Reset CSS。
【讨论】：
值得一提的是，重置也有助于开发具有良好浏览器兼容性的页面。我还重置了边距和填充，以实现在多个浏览器中看起来几乎相同的布局。 我会在未来的某个时候尝试使用它。感谢您的链接。 顺便说一句，您可以使用resource://gre/res/html.css 之类的 URL 检查 Firefox 中的浏览器样式表，但在这种情况下，它们会告诉您 Firefox 实际上并没有设置表格字体大小的规则与身体不同的细胞。但是，如果您查看 Quirks Mode CSS：resource://gre/res/quirk.css，您会发现在 quirks 模式下，它将表格字体大小设置为浏览器默认值 (font-size: -moz-initial;)【参考方案3】：
不知道这是什么原因，但是自从我 8 年前开始使用 CSS 和 HTML 以来，情况一直如此，表格不会从正文继承字体大小。选择元素和输入元素也是如此。
所以我总是这样做：
body, table, select, input
font-size: 12px;
font-family: arial, tahoma, sans-serif;
所以这是一种解决方法，对我有用。
【讨论】：
这可能是 IE 的情况（让我们面对现实 - IE 最有可能是这种愚蠢故障的罪魁祸首......！）。如果做不到这一点，如果您将 doctype 设置为 transitional 尝试将其设置为 strict 并查看它是否解决了问题。我不知道实际的区别是什么，但这无论如何对我有用。问候，理查德 你可能会发现table, caption font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; 使用起来更方便【参考方案4】：
我刚刚发现答案是什么 - 它是文档类型。我认为 Dreamweaver、Visual Studio 和 Eclipse PHP 都创建了 doctype 设置为 strict 的文件，而 netbeans 将其设置为 transitional。将过渡更改为严格，从正文到表的继承工作正常。
感谢大家的帮助。
问候，
理查德
【讨论】：
【参考方案5】：确保您的 DOCTYPE 设置正确（W3C 会有详细信息）...
或
table
font-size: 1em;
一切都会好起来的；）
【讨论】：
以上是关于为啥即使我没有明确设置表格字体大小，表格也不使用正文字体大小？的主要内容，如果未能解决你的问题，请参考以下文章