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

本文介绍了为什么即使我没有明确设置表格字体大小，表格也不使用正文字体大小?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个问题，我将正文字体大小设置为 11 像素，但表格显示的字体为 16 像素.我不知道是什么原因造成的 - 我一次又一次地检查 CSS 和输出(浏览页面时的源).将表格字体大小明确设置为 11px 具有所需的效果，但我不需要将其设置为正文样式以外的任何位置.

我有以下 CSS:

body {字体系列:Verdana、Arial、Helvetica、sans-serif；字体大小:11px；边距:0px；背景颜色:#E7D2B8；颜色:#863F2B；}img.headerImg {宽度:100%；}.菜单条{向左飘浮;宽度:20%；}.main-content {向左飘浮;宽度:80%；}.清除 {清楚:两者；}ul.menu {边距:0px；左边距:10px；填充:0px；列表样式:无；}ul.menu li {边距:0px；填充:0px；填充顶部:10px；填充底部:10px；}div.footer {宽度:60%；左边距:20%；}ul.footer-links {列表样式:无；}ul.footer-links li {向左飘浮;填充:20px；}ul.footer-links li:last {清楚:对；}桌子 {宽度:100%；边框折叠:折叠；}TD{垂直对齐:顶部；}

...输出如下:

我真的看不到任何可以将表格中的字体大小设置为 16px 的内容.所有 3 个部分(thead、tfoot、tbody)都会发生这种情况.Netbeans 6.9 似乎也不会正确格式化表格，但它会完成文档的其余部分(之前和之后).几乎好像桌子有问题，但我看不出是什么.这发生在 Firefox 和 Opera(两者的最新版本)中.我没有在 IE 中测试它，因为它永远不会在 IE 中使用.

解决方案

浏览器是否以 quirks 模式呈现?显然，怪癖模式重新创建了一些表不能正确继承的遗留行为:

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

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.

I have the following 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.

解决方案

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/

这篇关于为什么即使我没有明确设置表格字体大小，表格也不使用正文字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！