DOCTYPE影响线条高度的渲染

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

基本上，使用HTML5，HTML 4严格或严格的XHTML DOCTYPE时，按钮呈现为设计的。但是，使用HTML4或XHTML过渡文档时，插入符号按钮的高度较低。下面是从引导相关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 - 是的，我知道，引导需要HTML5，但我想像这是相对于HTML5的功能使用，而不是如何在DOCTYPE呈现CSS样式

来源

2012-06-29 jackwanders

在写这个问题，并在相关的jsFiddle演示，我完成了一些更多的挖掘工作，并发现了正在发生的事情。我认为我不应该废弃这个问题，而应该用这个答案发布。

我已经从检查在Chrome中的元素交换DOCTYPES后聚集是这样的：

.btn没有指定的高度，只有line-height: 18px和padding: 4px 10px在HTML5
，则caret-的最终高度唯一的按钮是18像素，相同定义line-height
在一个DOCTYPE过渡，唯一的脱字符号按钮的高度是11像素，相同的caret（border-top的），但小于按钮的line-height。

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

当我在插入符号按钮（例如 ）中添加一些文本时，line-height会启用Transitional DOCTYPE并且按钮在全高度渲染。

来源

2012-06-29 20:30:23 jackwanders

过渡DOCTYPE触发几乎所谓的标准模式，这基本上是标准模式，有一些怪癖。由于这与盒子模型有关，你*可能会遇到这些怪癖之一，但我不知道肯定... – BoltClock

我最近遇到[这个微软网页]（http：// msdn。 microsoft.com/en-us/library/ff405794%28v=vs.85%29），它描述了几乎标准模式下的行高处理差异。我在[这个答案]讨论它（http://stackoverflow.com/questions/11206730/html5-vs-html4-h1-tag-rendered-with-extra-space-how-to-remove/11217791#11217791）也与你的问题有关。特别是，它没有处理导致你看到的差异的支柱。 – Alohci

刚刚遇到此问题。这是2016年以外，但我们仍然处理相同的问题:(无论如何，谢谢你的答案！ – vmg

DOCTYPE影响线条高度的渲染

回答

相关问题