3

簡単な HTML コードを次に示します。

<!doctype html>
<html>
    <head>
        <style type="text/css">
            body{ padding:0px; margin:0px; font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:normal; }
            .pingBtCon{ display:block; margin:0px; border:1px solid; }
            .pingFavoriteMe{ font-size:10px; color:#666; cursor:pointer; display:inline-block; }
            .pingFavoriteMe:hover{ color:#333; }
        </style>
    </head>
    <body>
        <div class="pingBtCon"><a class="pingFavoriteMe">Favorite</a></div>
    </body>
</html>

Chrome で実行すると、 に a が追加2px padding-topされdiv.pingBtConます。したがって、その全高は17px、それ以外の場合は のみになるはず15pxです。そして、それはあまり良く見えません。

しかし、驚くべきことに、 を削除すると、 なしで OK<!doctype html>になります。.pingBtConpadding-top

何が起こっていますか？

<!doctype html> を使用

<!doctype html> なし

4

3 に答える 3

1

doctype を追加すると、ブラウザーが標準モードになります。標準モードと他のモード (Quirks とほぼ標準) の重要な違いの 1 つは、含まれる行ボックスの高さを計算するときに、含まれるブロックレベル ボックスのフォントの高さが考慮されることです。

したがって、標準モードの doctype を使用しない場合、クラス pingBtCon の div には 1 つの行ボックスが含まれ、その高さは「お気に入り」テキストの高さ、つまり k * (10px) に比例します。

標準モードdoctyoeでは、クラスpingBtConのdivには1つのラインボックスが含まれ、その高さは「お気に入り」テキストの高さとdivに指定されたフォントの高さの最大値に比例します(あなたの場合はbody 要素から font-size を継承します)。つまり、k * max(10px, 12px) です。

そのため、標準モードの doctype では、ライン ボックスがわずかに高くなり、そのため、そこに含まれる div も高くなります。

これを修正するには、クラス pingBtCon の div のフォント サイズを、クラス pingFavoriteMe の要素のフォント サイズと同じ、つまり 10px に設定します。

だから追加.pingBtCon { font-size:10px; }

于 2013-02-16T01:32:18.410 に答える
0

非推奨 fontのタグを使用しています。CSS を使用できる場合は、そうする必要はありません。

<a class="pingFavoriteMe pingBtCon">Favorite</a>
于 2013-02-15T03:22:05.253 に答える
-1

すべての新しい Web ページには、標準モードにするための Doctype が必要です。doctype を使用しないと、癖があり、簡単に言えば、1999 年のように、マージンとパディングがすべて裏返しになっているようなものです。

doctype は残しておいて、他のものを追加する前に、それがすべてのページに最初に置くものであることを確認してください。これは、現在のような問題を抱え続けているため、傷の世界に身を任せないようにするためです。

于 2013-02-15T03:37:10.317 に答える