这个问题让人很困惑。
我创建了一个有注释的jsFiddle以演示我最近在使用Twitter Bootstrap框架创建下拉按钮时遇到的现象。
http://jsfiddle.net/jackwanders/WKvPv/
基本上,当使用HTML5、HTML 4 Strict或XHTML Strict DOCTYPE时,按钮渲染为设计样式。但是,当使用HTML4或XHTML Transitional DOCTYPE时,下拉箭头的高度会变短。以下是Bootstrap中与<span class="caret">
相关的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;
}
为什么文档类型声明会影响按钮的高度?如果将line-height
设置为18px,为什么高度会小于18px?PS - 是的,我知道Bootstrap需要HTML5,但我想这是针对所使用的HTML5功能而不是DOCTYPE如何呈现CSS样式。