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;
}

为什么文档类型声明会影响按钮的高度？如果将line-height设置为18px，为什么高度会小于18px？

PS - 是的，我知道Bootstrap需要HTML5，但我想这是针对所使用的HTML5功能而不是DOCTYPE如何呈现CSS样式。

- jackwanders

Answer 1

在撰写这个问题和相关的jsFiddle演示时，我进行了更多的查找并发现了所发生的情况。与其放弃这个问题，我想我不如附上这个答案。

从在Chrome中检查元素后切换DOCTYPES所收集到的信息如下：

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

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

当我向仅包含插入符的按钮添加一些文本（例如 ），然后在Transitional DOCTYPE上触发line-height，按钮将呈现为完整的高度。

- jackwanders

---

过渡性的 DOCTYPE 会触发所谓的准标准模式，基本上是带有一些怪癖的标准模式。由于这与盒子模型有关，你可能会遇到其中的某些怪癖，但我不确定... - BoltClock

我最近发现了这个微软页面，它描述了几乎标准模式下的行高处理差异。我在这个答案中讨论了它，这也与你的问题相关。特别是，缺少支撑线处理导致了你看到的差异。 - Alohci

刚遇到这个问题。虽然已经是2016年了，但我们仍在处理相同的问题:( 无论如何，还是谢谢你的回答！ - vmg

谢谢！我刚遇到了这个确切的问题。 - JW.