11

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

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

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 样式

4

1 回答 1

10

在写这个问题和相关的 jsFiddle 演示时，我做了一些更多的挖掘并发现了发生了什么。与其放弃这个问题，我想我也可以用这个答案发布它。

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

  • .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......而过渡 DOCTYPES 则不适用。

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

于 2012-06-29T20:30:23.790 回答