web-dev-qa-db-ja.com

テーブルのフォントサイズを明示的に設定していないのに、テーブルで本文のフォントサイズが使用されないのはなぜですか？

本文のフォントサイズを11pxに設定したが、テーブルには16pxのフォントが表示されるという問題があります。何がこれを引き起こしているのか分かりません-CSSと出力（ページを閲覧するときのソース）を何度も繰り返しました。テーブルのfont-sizeを明示的に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>

表でfont-sizeを16pxに設定できるものは何もありません。これは、3つのセクションすべて（thead、tfoot、tbody）で発生します。また、Netbeans 6.9はテーブルを適切にフォーマットしないようですが、ドキュメントの残りの部分（前と後）を行います。テーブルに何か問題があるかのように見えますが、何が見えるかわかりません。これはFirefoxで発生し、Opera（両方の最新バージョン）。IEでは使用されないため、IEでテストしていません。

htmlcsshtml-tablefont-size
37
ClarkeyBoy

ブラウザは奇抜なモードでレンダリングされていますか？どうやらquirksモードは、テーブルが適切に継承されないいくつかのレガシー動作を再作成します：

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

30
grossvogel

なぜ<h1>は、CSSルールを使用しない場合でも大きく見えますか？

これは、WebブラウザーにデフォルトのCSSルールが組み込まれているためです。このデフォルトの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;
}

...または Reset CSS を使用します。

29
Richard JP Le Guen

この理由がわからないが、8年前にCSSとHTMLを始めて以来、これは常に当てはまり、テーブルは本文からフォントサイズを継承しない。選択要素および入力要素についても同様です。

だから私はいつも次のようなことをします：

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

したがって、これは一種の回避策であり、私にとってはうまくいきます。

5
Alex Sawallich

[〜＃〜] doctype [〜＃〜]が正しく設定されていることを確認してください（W3Cには詳細があります）...

OR

table {
   font-size: 1em;
}

そして、すべてがうまくいきます;）

4
Alexander Smith

私はちょうど答えが何であるかを見つけました-それはDoctypeでした。 Dreamweaver、Visual Studio、Eclipse PHPはすべてdoctypeをstrictに設定してファイルを作成しますが、netbeansはそれを移行に設定します。移行をstrictに変更し、ボディからテーブルへの継承は正常に動作します。

とにかくみんなに助けてくれてありがとう。

よろしく、

リチャード

2
ClarkeyBoy