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.
我有一个问题，我将body字体大小设置为11px，但是表格显示字体为16px。我不知道是什么导致了这种情况——我反复地浏览CSS和输出(浏览页面时源文件)。将表字体大小设置为11px显式具有期望的效果，但我不需要将它设置为与body样式不同的位置。
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。这发生在所有三个部分(thead, tfoot, tbody)。Netbeans 6.9似乎不会正确地格式化表，但是它会处理文档的其余部分(在之前和之后)。这桌子好像有什么毛病，但我看不出是什么毛病。这发生在Firefox和Opera中(两者的最新版本)。我还没有在IE中测试过，因为它永远不会在IE中使用。
5 个解决方案
#1
30
Are the browsers rendering in quirks mode? Apparently quirks mode recreates some legacy behavior where tables do not inherit properly:
浏览器是否呈现为奇怪模式?显然，“怪癖模式”在表不能正确继承的情况下重新创建了一些遗留行为:
http://web.archive.org/web/20120718183019/http:/ /devedge-temp.mozilla.org/viewsource/2002/table-inherit/
#2
28
Ever wonder why an <h1> looks BIG even when you don't use any CSS rules?
想知道为什么
看起来很大，即使你不使用任何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开发人员造成不良影响，这就是为什么人们使用重置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 specificity of 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 specificity of your rule.
…或者增加你的规则的特殊性。
html body { /* increased specificity! */
font-size:11px;
}
... Or use a Reset CSS.
…或者使用重置CSS。
#3
5
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.
这是一种变通方法，对我来说是可行的。
#4
1
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.
我刚刚找到了答案——是doctype。我认为Dreamweaver、Visual Studio和Eclipse PHP都创建了文档类型设置为strict的文件，而netbeans将其设置为transitional。从过渡到严格，从主体到表的继承可以很好地工作。
Thanks for the help anyway everyone.
谢谢大家的帮助。
Regards,
问候,
Richard
理查德。
#5
1
Make sure you have the DOCTYPE set correctly (W3C will have details) ...
确保您的DOCTYPE设置正确(W3C将有详细信息)……
OR
或
table {
font-size: 1em;
}And all will be well ;)
一切都会好起来的;
#1
30
Are the browsers rendering in quirks mode? Apparently quirks mode recreates some legacy behavior where tables do not inherit properly:
浏览器是否呈现为奇怪模式?显然，“怪癖模式”在表不能正确继承的情况下重新创建了一些遗留行为:
http://web.archive.org/web/20120718183019/http:/ /devedge-temp.mozilla.org/viewsource/2002/table-inherit/
#2
28
Ever wonder why an <h1> looks BIG even when you don't use any CSS rules?
想知道为什么
看起来很大，即使你不使用任何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开发人员造成不良影响，这就是为什么人们使用重置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 specificity of 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 specificity of your rule.
…或者增加你的规则的特殊性。
html body { /* increased specificity! */
font-size:11px;
}
... Or use a Reset CSS.
…或者使用重置CSS。
#3
5
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.
这是一种变通方法，对我来说是可行的。
#4
1
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.
我刚刚找到了答案——是doctype。我认为Dreamweaver、Visual Studio和Eclipse PHP都创建了文档类型设置为strict的文件，而netbeans将其设置为transitional。从过渡到严格，从主体到表的继承可以很好地工作。
Thanks for the help anyway everyone.
谢谢大家的帮助。
Regards,
问候,
Richard
理查德。
#5
1
Make sure you have the DOCTYPE set correctly (W3C will have details) ...
确保您的DOCTYPE设置正确(W3C将有详细信息)……
OR
或
table {
font-size: 1em;
}And all will be well ;)
一切都会好起来的;