DOCTYPE 影响行高的渲染

Question

这是一个令人头疼的问题。

我创建了一个带注释的 jsFiddle 来演示我最近在使用 Twitter 的 Bootstrap 框架创建一些下拉按钮时遇到的现象。

http://jsfiddle.net/jackwanders/WKvPv/

基本上，当使用 HTML5、HTML 4 Strict 或 XHTML Strict DOCTYPE 时，按钮会按设计呈现。但是，当使用 HTML4 或 XHTML Transitional DOCTYPE 时，插入符号按钮以较短的高度呈现。这是来自 Bootstrap 的 <span class="caret"> 的相关 CSS（我已经删除了无关紧要的样式，例如颜色和渐变）：

.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 - 是的，我知道 Bootstrap 需要 HTML5，但我想这与所使用的 HTML5 功能有关，而不是 DOCTYPE 如何呈现 CSS 样式

Answer 1

在编写此问题和相关的 jsFiddle 演示时，我进行了更多挖掘并发现了发生了什么。与其放弃这个问题，我想我不妨附上这个答案。

在切换 DOCTYPES 后，我通过检查 Chrome 中的元素收集到的是：

• .btn 没有指定高度，只有 line-height: 18px 和 padding: 4px 10px
• 在HTML5中，仅插入符号按钮的最终高度为18px，与定义的line-height相同
• 在Transitional DOCTYPE中，仅插入符号按钮的高度为11px，与caret的outerHeight()相同（border-top + margin-top），但小于按钮的line-height .

所以，我只能假设 Strict（和 HTML5）DOCTYPE 将 line-height 强制为某种 min-height；即使元素中没有文本，它也会应用 line-height ... 而 Transitional DOCTYPES 则不会。

当我向仅插入符号的按钮（例如 ）添加一些文本时，line-height 会启动过渡 DOCTYPE，并且按钮会以全高呈现。