Html 为什么即使我没有明确设置表格字体大小，表格也不使用正文字体大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3388705/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why is a table not using the body font size even though I haven't set the table font size explicitly?
提问by ClarkeyBoy
I have a problem whereby I have set the body font-size to 11px, but tables display font at 16px. I have no idea whats causing this - I have been over the CSS and the output (source when browsing to the page) time and time again. Setting table font-size to 11px explicitly has the desired effect, but I shouldn't need to set it anywhere apart from the body style.
我有一个问题，我将正文字体大小设置为 11 像素，但表格显示字体为 16 像素。我不知道是什么原因造成的 - 我一次又一次地检查 CSS 和输出（浏览页面时的源）。将表格字体大小明确设置为 11px 具有所需的效果，但我不需要将其设置为除正文样式之外的任何地方。
I have the following CSS:
我有以下 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;
}
...and the output is as follows:
...输出如下：
<!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" alt="Header image" 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>
I seriously cant see anything which could set the font-size to 16px in the table. This happens for all 3 sections (thead, tfoot, tbody). It also seems that Netbeans 6.9 will not format the table properly, but it does the rest of the document (before and after). Its almost as if there is something wrong with the table, but I can't see what. This happens in Firefox and Opera (most recent versions of both). I haven't tested it in IE because it will never be used in IE.
我真的看不到任何可以将表格中的字体大小设置为 16px 的内容。所有 3 个部分（thead、tfoot、tbody）都会发生这种情况。Netbeans 6.9 似乎也不会正确格式化表格，但它会完成文档的其余部分（之前和之后）。几乎好像桌子有问题，但我看不出是什么。这发生在 Firefox 和 Opera（两者的最新版本）中。我没有在 IE 中测试它，因为它永远不会在 IE 中使用。
采纳答案by grossvogel
Are the browsers rendering in quirks mode? Apparently quirks mode recreates some legacy behavior where tables do not inherit properly:
浏览器是否以怪癖模式呈现？显然，怪癖模式重新创建了一些表不能正确继承的遗留行为：
回答by Richard JP Le Guen
Ever wonder why an <h1>looks BIG even when you don't use any CSS rules?
有没有想过为什么<h1>即使你不使用任何 CSS 规则看起来也很大？
This is because web browsers have default CSS rules built in. Included in this default CSS are rules for tables.
这是因为 Web 浏览器具有内置的默认 CSS 规则。此默认 CSS 中包含表格规则。
Unfortunately, these hidden CSS rules sometimes play nasty tricks on us web developers, and this is why people use Reset CSS.
不幸的是，这些隐藏的 CSS 规则有时会对我们的 Web 开发人员起到讨厌的作用，这就是人们使用Reset CSS 的原因。
So, somewhere under the hood, FireFox has decided that there is an additional rule...
所以，在幕后的某个地方，FireFox 决定有一个额外的规则......
table {
font-size:16px; /* actually it's "-moz-initial"
you can check this using FireBug
*/
}
Then your rule is...
那么你的规则是...
body {
font-size:11px;
}
Both these rules have a specificityof 1, so the browser gets to decide a little arbitrarily which takes precedence.
这两个规则的特殊性都为 1，因此浏览器可以随意决定哪个优先。
So, to fix this, either target the table yourself:
因此，要解决此问题，请自己定位该表：
table {
font-size:11px;
}
... Or increase the specificityof your rule.
... 或者增加你的规则的特殊性。
html body { /* increased specificity! */
font-size:11px;
}
... Or use a Reset CSS.
...或使用重置 CSS。
回答by Fidi
Don't know what the reason for this is, but since my beginning with CSS & HTML 8 years ago, this was always the case, that tables don't inherit the font-size from the body. Same goes for select- and input-elements.
不知道这是什么原因，但是自从我 8 年前开始使用 CSS 和 HTML 以来，情况总是如此，表格不会从正文继承字体大小。选择和输入元素也是如此。
So I always do something like:
所以我总是做这样的事情：
body, table, select, input {
font-size: 12px;
font-family: arial, tahoma, sans-serif;
}
So this is kind of a workaround, that works for me.
所以这是一种解决方法，对我有用。
回答by Alexander Smith
Make sure you have the DOCTYPEset correctly (W3C will have details) ...
确保您已正确设置DOCTYPE（W3C 将提供详细信息）...
OR
或者
table {
font-size: 1em;
}And all will be well ;)
一切都会好起来的 ;)
回答by ClarkeyBoy
I just found out what the answer is - it was the doctype. I think Dreamweaver, Visual Studio and Eclipse PHP all create the files with doctype set to strict, whereas netbeans sets it to transitional. Change transitional to strict and the inheritance from body to tables works fine.
我刚刚发现答案是什么 - 这是文档类型。我认为 Dreamweaver、Visual Studio 和 Eclipse PHP 都创建了 doctype 设置为严格的文件，而 netbeans 将其设置为过渡。将 transitional 更改为 strict 并且从 body 到 table 的继承工作正常。
Thanks for the help anyway everyone.
无论如何，感谢大家的帮助。
Regards,
问候，
Richard
理查德
