DOCTYPE影响行高的渲染

Question

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

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

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

基本上,当使用HTML5,HTML 4 Strict或XHTML Strict DOCTYPE时,按钮按设计呈现.但是,当使用HTML4或XHTML Transitional 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样式

Answer 1

在写这个问题和相关的jsFiddle演示时,我最后做了一些挖掘并发现了正在发生的事情.而不是废弃这个问题,我想我也可以用这个答案发布它.

我在切换DOCTYPES后检查Chrome中的元素时收集到的是:

• .btn没有指定高度,只有line-height: 18px和padding: 4px 10px
• 在HTML5中,插入符号按钮的最终高度为18px,与定义的相同 line-height
• 在一个DOCTYPE过渡,唯一的脱字符号按钮的高度是11像素,相同outerHeight()的caret(border-top+ margin-top比),但小于line-height所述按钮的.

所以,我只能假设Strict(和HTML5)DOCTYPE强制执行line-height某种形式min-height; 即使元素中没有文本,它也适用line-height......而Transitional DOCTYPES则不适用.

当我向插入符号按钮添加一些文本时( 例如),然后line-height在Transitional DOCTYPE上启动并按钮呈现全高.