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 中运行它时，它会2px padding-top在div.pingBtCon. 这样它的总高度就变成17px了，否则应该只有15px。而且看起来不太好。

但令人惊讶的是，当我删除时<!doctype html>，.pingBtCon没有就可以了padding-top。

发生了什么？

使用 <!doctype html>

没有 <!doctype html>

4

3 回答 3

1

添加 doctype 时，您将浏览器置于标准模式。标准模式和其他模式（怪癖和几乎标准）之间的一个重要区别是，在计算包含的行框的高度时，会考虑包含块级框的字体高度。

因此，如果没有标准模式的 doctype 类 pingBtCon 的 div，它包含一个行框，其高度与“收藏”文本的高度成正比，即 k * (10px)。

使用标准模式 doctyoe，具有 pingBtCon 类的 div 包含一个行框，其高度与“收藏夹”文本的高度和为 div 指定的字体高度的最大值成正比（在您的情况下从 body 元素继承其字体大小）。即 k * max(10px, 12px)。

因此，对于标准模式 doctype，行框略高，因此其包含的 div 也是如此。

要修复它，只需将 pingBtCon 类的 div 的字体大小设置为与 pingFavoriteMe 类的 a 元素的字体大小相同，即 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

所有新网页都需要有一个 doctype才能使您进入标准模式。不使用 doctype 会使您进入怪癖模式，就像 1999 年又一次一样，其中边距和填充等等都是由内而外的，简单地说。

保留文档类型，并确保它是您在添加任何其他内容之前放在每个页面上的第一件事，以免您继续遇到像现在这样的问题，让自己陷入一个受伤的世界。

于 2013-02-15T03:37:10.317 回答