可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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.

回答1:

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:

Ever wonder why an <h1> looks BIG even when you don't use any CSS rules?

This is because web browsers have default CSS rules built in. Included in this default CSS are rules for tables.

Unfortunately, these hidden CSS rules sometimes play nasty tricks on us web developers, and this is why people use Reset CSS.

So, somewhere under the hood, FireFox has decided that there is an additional rule...

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.

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.

回答3:

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.

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:

Make sure you have the DOCTYPE set correctly (W3C will have details) ...

table {
   font-size: 1em;
}

And all will be well ;)

回答5:

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.

Thanks for the help anyway everyone.

Regards,

Richard