聲明<！DOCTYPE HTML>添加2px的填充，頂部FONT元素

下面是一些簡單的HTML代碼：聲明<！DOCTYPE HTML>添加2px的填充，頂部FONT元素

<!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中運行它，它增加了一個2pxpadding-top到div.pingBtCon。因此其總高度變爲17px，否則本應該只有15px。它看起來不太好。

但令人驚訝的是，當我刪除<!doctype html>時，.pingBtCon變得沒有問題padding-top。

發生了什麼事？

With <!doctype html>

without <!doctype html>

來源

2013-02-15 sanchitkhanna26

不要使用'font'。它已被棄用。 – 2013-02-15 03:21:30

使用div，也是這樣 – sanchitkhanna26 2013-02-15 03:22:30

實際上，['font'是HTML5以前的* obsolete *]（https://developer.mozilla.org/en-US/docs/HTML/Element/font）。威茲 - 砰！ – 2013-02-15 03:23:51

您使用的是deprecatedfont標籤。當你可以使用CSS時，沒有理由這樣做。

<a class="pingFavoriteMe pingBtCon">Favorite</a>

來源

2013-02-15 03:22:05

-1

All new web pages are required to have a doctype使您進入標準模式。簡單地說，不使用文檔類型會讓你進入quirks mode，它就像1999年一樣，其中的邊距和填充等內容都已全部翻轉過來。

保留文檔類型並確保它是您在添加任何其他內容之前放入每個頁面的第一件事，以免讓您陷入一個受傷的世界，因爲您繼續存在像現在這樣的問題。

來源

2013-02-15 03:37:10 Rob

感謝您的演講，但您沒有回答這個問題。 – 2013-04-23 14:49:19

@JackMarchetti我很好地回答了這個問題，如果你會注意到，它和其他人很相似。這個人正在添加/刪除文檔類型，並質疑爲什麼東西在他身上移動。如果您需要繼續教育，請提出您自己的問題。 – Rob 2013-04-23 15:06:34

當您添加doctype時，您將瀏覽器置於標準模式。標準模式和其他模式（怪癖和幾乎標準）之間的一個重要區別是，包含塊級別框的字體高度在計算其包含的線框高度時會予以考慮。

因此，沒有標準模式doctype與類pingBtCon的div，包含一個線框，其高度與「收藏」文本的高度成正比，即k *（10px）。

對於standarda模式的doctyoe，帶有pingBtCon類的div包含一個線框，其高度與「Favorite」文本的高度最大值以及div指定的字體高度成正比在你的情況下，它從body元素繼承它的字體大小）。即k * max（10px，12px）。

因此，對於標準模式doctype，線框略高，因此，其包含的div也是如此。

要修復它，只需將類pingBtCon的div的字體大小設置爲與具有類pingFavoriteMe的a元素（即10px）相同即可。

所以加.pingBtCon { font-size:10px; }

來源

2013-02-16 01:32:18 Alohci

聲明<！DOCTYPE HTML>添加2px的填充，頂部FONT元素

回答

相關問題