Почему таблица не использует размер шрифта тела, хотя я не задал размер шрифта таблицы явно?

У меня проблема, при которой я установил размер шрифта тела в 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>

Я серьезно не вижу ничего, что могло бы установить размер шрифта в 16 пикселей в таблице. Это происходит для всех трех разделов (thead, tfoot, tbody). Также кажется, что Netbeans 6.9 не будет правильно отформатировать таблицу, но остальная часть документа (до и после). Его почти как будто что-то не так с таблицей, но я не вижу, что. Это происходит в Firefox и Opera (самые последние версии обоих). Я не тестировал его в IE, потому что он никогда не будет использоваться в IE.

Ответ 1

Являются ли рендеринг браузеров в режиме quirks? Очевидно, режим quirks воссоздает некоторое унаследованное поведение, когда таблицы не наследуют должным образом:

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

Ответ 2

Вы когда-нибудь задавались вопросом, почему <h1> выглядит БОЛЬШОЙ, даже если вы не используете какие-либо правила CSS?

Это связано с тем, что в веб-браузерах встроены правила CSS по умолчанию. В этот CSS по умолчанию включены правила для таблиц.

К сожалению, эти скрытые правила CSS иногда играют неприятные трюки с нами в веб-разработчиках, и именно поэтому люди используют Reset CSS.

Итак, где-то под капотом FireFox решил, что есть дополнительное правило...

table {
    font-size:16px; /* actually it "-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.

Ответ 3

Не знаю, в чем причина этого, но с самого начала с CSS и HTML 8 лет назад это всегда было так, что таблицы не наследуют размер шрифта из тела. То же самое касается элементов выбора и ввода.

Итак, я всегда делаю что-то вроде:

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

Итак, это своего рода обходной путь, который работает для меня.

Ответ 4

Я только узнал, что ответ - это был doctype. Я думаю, что Dreamweaver, Visual Studio и Eclipse PHP создают файлы с установленным типом doctype, тогда как netbeans устанавливает его в переходный. Изменить переход к строгому и наследование от тела к таблицам отлично работает.

Спасибо за помощь в любом случае.

Привет,

Ричард

Ответ 5

Убедитесь, что у вас установлен DOCTYPE (W3C будет содержать детали)...

ИЛИ

table {
   font-size: 1em;
}