以下示例使用HTML 4.01 Transitional doctype声明,span不会得到顶部和底部之间的特殊差距.
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<div style="background:red"><span>dark green</span></div>
</body>
</html>
CSS
span {
background: yellow;
color: black;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: normal;
}
但是,如果我们将其更改为使用HTML5声明<!DOCTYPE html>,则跨度将获得特殊差距.
以下是jsfiddle中的完整示例(如果您将Fiddle Options的DTD更改为使用HTML5,您将看到问题所在.
这与div元素的"行高"计算方式有关.将div元素的"line-height"设置为与span相同的"font-size"是解决此问题的一种方法.像这样:
div { line-height: 12px; }
严格(和HTML5)DOCTYPE 似乎强制执行 "行高",就像它是"min-height"一样.即使元素中没有任何文本,仍然会应用"line-height".
Transitional DOCTYPE在浏览器中触发"几乎标准"模式,这基本上是具有一些怪癖的标准模式.
此页面解释了"几乎标准"模式下行高计算的行为:
当且仅当下列之一为真时,内联元素才会影响行高.
如果元素:
- 包含文本字符
- 具有非零边框宽度
- 具有非零保证金
- 有一个非零填充
- 有背景图片
- 将vertical-align设置为基线以外的值
请注意,换行符不被视为此定义的文本字符,除非它是行框的唯一内容.在这种情况下,无论指定的行高如何,行框高度都保持在行的最上面的内联框顶部和最下面的内联框底部.
如果img元素是表格单元格的唯一内容,则单元格行高度的行框高度将调整为零.
| 归档时间： |
|
| 查看次数： |
616 次 |
| 最近记录： |