Question

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

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

基本上，当使用HTML5，HTML 4 Strict或XHTML Strict DOCTYPE时，按钮按设计呈现。但是，当使用HTML4或XHTML Transitional DOCTYPE时，插入符号按钮呈现较短的高度。这是来自<span class="caret">的Bootstrap的相关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，与outerHeight()（caret + border-top的{{1}}相同，但更少而不是按钮的margin-top。

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

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

DOCTYPE影响行高的渲染

1 个答案: