DOCTYPE会影响线条高度的渲染 [英] DOCTYPE affects rendering of line-height

问题描述

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

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纯透明; 
 border-left：4px实体透明; 
 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样式。 h2_lin>解决方案

在写这个问题和相关的jsFiddle演示时，我停止了一些更深入的挖掘，并发现了发生的事情。

我在切换DOCTYPES之后在Chrome中检查元素时收集的内容是这样的：

• .btn 没有指定高度，只有行HTML5中的高分辨率：18px 和填充：4px 10px


• 只有按钮是18px，与Transitional DOCTYPE中定义的 line-height


• 相同，插入符号按钮的高度为11px，与 caret < border-top outerHeight（）相同c $ c> + margin-top ），但小于按钮的 line-height 。
>


所以，我只能假设Strict（和HTML5）DOCTYPE强制执行 line-height 作为某种 min-height ;即使元素中没有文本，它也会应用 line-height ...而Transitional DOCTYPES不会。

当我在插入符号按钮（例如& nbsp; ）中添加一些文本时，则 line-height 踢过渡式DOCTYPE，按钮在全高度渲染。

This one's a head scratcher.

I've created a commented jsFiddle to demonstrate the phenomenon I recently encountered while using Twitter's Bootstrap framework to create some dropdown buttons.

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

Basically, when using an HTML5, HTML 4 Strict or XHTML Strict DOCTYPE, the button renders as designed. However, when using an HTML4 or XHTML Transitional DOCTYPE, the caret button renders with a shorter height. Here's the relevant CSS from Bootstrap for the <span class="caret"> (i've removed styles that don't matter, like colors and gradients):

.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;
}

Why does the DOCTYPE affect the height of the button? If line-height is set to 18px, why would the height be less than 18px?

PS - Yes, I'm aware that Bootstrap requires HTML5, but I'd imagine that's with respect to the HTML5 features utilized, not how the DOCTYPE renders CSS styles

解决方案

While writing this question and the related jsFiddle demo, I wound up doing some more digging and found out what's happening. Rather than scrap the question, I figured I may as well post it with this answer.

What I've gathered from inspecting the elements in Chrome after switching DOCTYPES is this:

• .btn has no height specified, only line-height: 18px and padding: 4px 10px
• in HTML5, the final height of the caret-only button is 18px, same as the defined line-height
• in a Transitional DOCTYPE, the height of the caret-only button is 11px, same as the outerHeight() of the caret (border-top + margin-top), but less than the line-height of the button.

So, I can only assume that Strict (and HTML5) DOCTYPEs enforce line-height as some kind of min-height; even if there is no text in the element, it applies line-height ... whereas Transitional DOCTYPES do not.

When I add some text to the caret-only button (  for example), then line-height kicks in on Transitional DOCTYPEs and the button renders at the full height.

这篇关于DOCTYPE会影响线条高度的渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！