DOCTYPE 影响行高的渲染

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

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

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

基本上，当使用 HTML5、HTML 4 Strict 或 XHTML Strict DOCTYPE 时，按钮将按设计呈现。但是，当使用 HTML4 或 XHTML过渡性的DOCTYPE，插入符号按钮以较短的高度呈现。这是来自 Bootstrap 的相关 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 - 是的，我知道 Bootstrap 需要 HTML5，但我想这是关于所使用的 HTML5 功能，而不是 DOCTYPE 如何呈现 CSS 样式

在写这个问题和相关的 jsFiddle 演示时，我最终做了一些更多的挖掘并发现发生了什么。我想与其废弃这个问题，不如将其与这个答案一起发布。

切换 DOCTYPES 后，我通过检查 Chrome 中的元素得到的信息是：

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

所以，我只能假设 Strict（和 HTML5）DOCTYPE 强制执行line-height作为某种min-height;即使元素中没有文本，它也适用line-height...而过渡性 DOCTYPES 则不然。

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