即使我没有明确设置表格的字体大小,为什么表格不使用正文字体大小?

44

我遇到一个问题,即使我将页面的字体大小设置为11px,但表格显示的字体大小却是16px。我不知道是什么原因导致这种情况发生-我已经反复检查了CSS和输出(在浏览页面时查看源代码)。将表格字体大小明确设置为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>

我无法找到任何能够将表格的字号设置为16像素的内容。这在表格的所有三个部分(thead,tfoot,tbody)中都发生。Netbeans 6.9似乎也无法正确格式化表格,但它可以对文档的其他部分(之前和之后)进行格式化。就好像表格有什么问题一样,但是我看不出来到底哪里出了问题。这在Firefox和Opera中发生(两者的最新版本)。我没有在IE中测试过,因为它永远不会在IE中使用。

5个回答

33

你是否曾经想过为什么即使你没有使用任何CSS规则,<h1>看起来也很大?

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

这两条规则的特异性均为1,因此浏览器会稍微随意地决定哪个优先级更高。

要解决这个问题,可以直接选择目标表格:

table {
    font-size:11px;
}

...或者增加你的规则优先级

html body { /* increased specificity! */
    font-size:11px;
}

... 或者使用重置CSS


1
应该指出的是,重置样式也有助于开发具有良好浏览器兼容性的网页。我还会重置边距和填充来实现在多种浏览器中看起来几乎相同的布局。 - Fidi
我将来会尝试使用这个。谢谢提供链接。 - ClarkeyBoy
1
顺便说一下,您可以使用类似 resource://gre/res/html.css 的 URL 在 Firefox 中检查浏览器样式表。在这种情况下,它们向您展示了Firefox实际上没有规则来设置表格单元格的字体大小与body不同。但是,如果您查看Quirks Mode CSS:resource://gre/res/quirk.css ,您会发现在Quirks模式中,它将表格字体大小设置为浏览器默认值(font-size: -moz-initial;)。 - Matt Gibson

30

2
我是正确的 - 我把过渡性改成了严格模式,它工作得很好! - ClarkeyBoy
4
DOCTYPE 与怪异模式息息相关——如果您没有使用有效的 DOCTYPE,您的浏览器将会在怪异模式下呈现页面,在 Firefox 中,至少会使用“quirks”样式表,其中包含非常类似于您所描述的样式。 - Bobby Jack
2
是的,这是正确的。使用正确的 DOCTYPE 来避免触发怪异模式将避免这个问题。您可以在 http://www.quirksmode.org/css/quirksmode.html 的底部找到有关怪异模式下表格单元格字体大小继承的描述(“表格单元格的字体大小”部分)。 - Matt Gibson
@grossvogel,你在回答中提供的链接已经失效了。我已经用互联网档案馆中的版本替换了它,但如果链接无法使用,如果你能在这里包含一些链接的上下文,那就太好了。 - Taryn
我在遇到与我的表格相同的问题。我的头部根据HTML5设置为<!DOCTYPE html>,我尝试了转换和严格两种方式,但都没有起作用。我还尝试将CSS字体大小继承应用于表格,但也没有效果。有任何想法吗? - Caio Mar
显示剩余3条评论

6

请确保正确设置了DOCTYPE(W3C网站上会有详细信息)...

或者

table {
   font-size: 1em;
}

一切都会好起来的;)


5

不知道这是为什么,但从我8年前开始使用CSS和HTML以来,表格并没有从body继承字体大小。选择和输入元素也是如此。

所以我总是做这样的事情:

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

所以这是一种对我有效的变通方法。

这可能是IE的问题(让我们面对现实吧 - IE最有可能是这样一个愚蠢失误的罪魁祸首..!)。如果失败了,如果您将文档类型设置为转换,请尝试将其设置为严格并查看是否解决了问题。我不知道实际的区别是什么,但无论如何这对我起作用了。问候,理查德 - ClarkeyBoy
1
你可能会发现使用 table, caption { font-size: inherit; font-weight: inherit; font-style: inherit; font-variant: inherit; } 更容易。 - jezmck

2
我刚刚发现问题的答案 - 它是文档类型。我认为Dreamweaver、Visual Studio和Eclipse PHP都会将文件的文档类型设置为strict,而NetBeans则将其设置为transitional。将transitional更改为strict,从body到tables的继承就可以正常工作了。
无论如何,感谢大家的帮助。
敬礼,
Richard

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接