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

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

37 голосов
/ 02 августа 2010

У меня проблема с тем, что я установил размер шрифта тела в 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 пикселей в таблице. Это происходит для всех 3 разделов (thead, tfoot, tbody). Также кажется, что Netbeans 6.9 не отформатирует таблицу должным образом, но выполняет остальную часть документа (до и после). Почти как будто что-то не так со столом, но я не вижу что. Это происходит в Firefox и Opera (самые последние версии обоих). Я не тестировал его в IE, потому что он никогда не будет использоваться в IE.

Ответы [ 5 ]

30 голосов
/ 02 августа 2010

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

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

29 голосов
/ 02 августа 2010

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

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

К сожалению, эти скрытые правила CSS иногда играют злую шутку с нами, веб-разработчиками, и именно поэтому люди используют Сброс 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 .

5 голосов
/ 02 августа 2010

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

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

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

Так что это своего рода обходной путь, который мне подходит.

4 голосов
/ 25 апреля 2017

Убедитесь, что DOCTYPE установлен правильно (W3C будет иметь подробную информацию) ...

ИЛИ 

table {
   font-size: 1em;
}

И все будет хорошо;)

2 голосов
/ 02 августа 2010

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

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

С уважением,

Richard

...