DOCTYPE影響線條高度的渲染

我創建了一個註釋的jsFiddle來演示我最近在使用Twitter的Bootstrap框架創建一些下拉按鈕時遇到的現象。

基本上，使用HTML5，HTML 4嚴格或嚴格的XHTML DOCTYPE時，按鈕呈現爲設計的。但是，使用HTML4或XHTML過渡文檔時，插入符號按鈕的高度較低。下面是從引導相關CSS爲<span class="caret">（我已經刪除樣式並不重要，像顏色和漸變）：

.caret { 
    display: inline-block; 
    width: 0; 
    height: 0; 
    vertical-align: top; 
    border-top: 4px solid #000000; 
    border-right: 4px solid transparent; 
    border-left: 4px solid transparent; 
    content: ""; 
} 

.btn .caret { 
    margin-top: 7px; 
    margin-left: 0; 
} 

.btn { 
    display: inline-block; 
    *display: inline; 
    padding: 4px 10px 4px; 
    margin-bottom: 0; 
    *margin-left: .3em; 
    line-height: 18px; 
    *line-height: 20px; 
    text-align: center; 
    vertical-align: middle; 
}

爲什麼DOCTYPE影響按鈕的高度？如果line-height設置爲18px，爲什麼高度小於18px？

PS - 是的，我知道，引導需要HTML5，但我想像這是相對於HTML5的功能使用，而不是如何在DOCTYPE呈現CSS樣式

來源

2012-06-29 jackwanders

在寫這個問題，並在相關的jsFiddle演示，我完成了一些更多的挖掘工作，並發現了正在發生的事情。我認爲我不應該廢棄這個問題，而應該用這個答案發布。

我已經從檢查在Chrome中的元素交換DOCTYPES後聚集是這樣的：

.btn沒有指定的高度，只有line-height: 18px和padding: 4px 10px在HTML5
，則caret-的最終高度唯一的按鈕是18像素，相同定義line-height
在一個DOCTYPE過渡，唯一的脫字符號按鈕的高度是11像素，相同的caret（border-top的），但小於按鈕的line-height。

所以，我只能假設，嚴格的（和HTML5）文檔類型強制line-height作爲某種min-height;即使元素中沒有文本，它也適用line-height ...而過渡DOCTYPES則不適用。

當我在插入符號按鈕（例如 ）中添加一些文本時，line-height會啓用Transitional DOCTYPE並且按鈕在全高度渲染。

來源

2012-06-29 20:30:23 jackwanders

過渡DOCTYPE觸發幾乎所謂的標準模式，這基本上是標準模式，有一些怪癖。由於這與盒子模型有關，你*可能會遇到這些怪癖之一，但我不知道肯定... – BoltClock

我最近遇到[這個微軟網頁]（http：// msdn。 microsoft.com/en-us/library/ff405794%28v=vs.85%29），它描述了幾乎標準模式下的行高處理差異。我在[這個答案]討論它（http://stackoverflow.com/questions/11206730/html5-vs-html4-h1-tag-rendered-with-extra-space-how-to-remove/11217791#11217791）也與你的問題有關。特別是，它沒有處理導致你看到的差異的支柱。 – Alohci

剛剛遇到此問題。這是2016年以外，但我們仍然處理相同的問題:(無論如何，謝謝你的答案！ – vmg

DOCTYPE影響線條高度的渲染

回答

相關問題