DOCTYPE会影响线条的渲染
这是一个头部划痕。
我创建了一个评论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样式
在写这个问题和相关的jsFiddle演示时，我停止了一些更深入的挖掘，并发现了正在发生的事情。 我认为我不应该废弃这个问题，而应该用这个答案发布。
在切换DOCTYPES之后，通过检查Chrome中的元素所得到的结果是：
.btn没有指定高度，只有line-height: 18px和padding: 4px 10px line-height caret的outerHeight()相同（ border-top + margin-top ），但小于按钮的line-height 。 所以，我只能假设严格（和HTML5）DOCTYPE强制line-height作为某种min-height ; 即使元素中没有文本，它也会应用line-height ...而Transitional DOCTYPES不会。
当我添加一些文本的唯一脱字符号键（ 例如），则line-height踢上过渡文档类型和按钮呈现在全高度。