Question

我有一个问题，我将body字体大小设置为11px，但表格显示字体为16px。我不知道是什么引起了这种情况 - 我一次又一次地浏览了CSS和输出（浏览页面时的源代码）。将表格字体大小设置为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" 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个部分（thead，tfoot，tbody）都会发生这种情况。似乎Netbeans 6.9不会正确地格式化表格，但它会完成文档的其余部分（之前和之后）。它几乎就好像桌子有问题，但我看不清楚是什么。这种情况发生在Firefox和Opera（两者的最新版本）中。我没有在IE中测试它，因为它永远不会在IE中使用。

Answer 1

浏览器是否以怪异模式呈现？显然，quirks模式会重新创建表格未正确继承的遗留行为：

http://web.archive.org/web/20120718183019/http://devedge-temp.mozilla.org/viewsource/2002/table-inherit/

Answer 2

有没有想过为什么即使你不使用任何CSS规则，<h1>看起来很大？

这是因为Web浏览器内置了默认的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。

Answer 3

不知道是什么原因，但自从我开始使用CSS＆amp; HTML 8年前，情况总是如此，表格不会从正文继承字体大小。选择元素和输入元素也是如此。

所以我总是这样做：

body, table, select, input {
    font-size: 12px;
    font-family: arial, tahoma, sans-serif;
}

所以这是一种解决方法，对我有用。

Answer 4

确保正确设置 DOCTYPE （W3C会有详细信息）...

OR

table {
   font-size: 1em;
}

一切都会好的;）

Answer 5

我刚刚找到答案是什么 - 它是doctype。我认为Dreamweaver，Visual Studio和Eclipse PHP都创建了doctype设置为严格的文件，而netbeans将其设置为过渡。将过渡更改为严格，从主体到表的继承可以正常工作。

感谢大家的帮助。

此致

理查德

为什么表没有使用正文字体大小，即使我没有明确设置表字体大小？

5 个答案: