我有一个问题，我将正文字体大小设置为 11 像素，但表格显示字体为 16 像素。我不知道是什么原因造成的——我一次又一次地查看 CSS 和输出(浏览页面时的源代码)。将 table font-size 显式设置为 11px 具有预期的效果，但我不需要将它设置为 body 样式以外的任何地方。
我有以下 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" 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>
我真的看不到任何可以在表格中将字体大小设置为 16px 的东西。这发生在所有 3 个部分(头部、 footer 、 body )。 Netbeans 6.9 似乎也不会正确格式化表格，但它会处理文档的其余部分(之前和之后)。好像 table 有问题，但我看不出是什么。这发生在 Firefox 和 Opera(两者的最新版本)中。我没有在 IE 中测试它，因为它永远不会在 IE 中使用。
最佳答案
有没有想过为什么 <h1>即使不使用任何 CSS 规则也看起来很大？
这是因为网络浏览器内置了默认的 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 .
关于html - 为什么即使我没有明确设置表格字体大小，表格也没有使用主体字体大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3388705/