内联内容上方和下方的空间是什么?
可见这里:http:
//jsbin.com/vertical-spacing-weirdness/
您可以在白色中看到 div/table 和 span 之间的区域;但是跨度没有填充或边距。
有趣的是,当使用过渡文档类型时,这个空间消失了:http:
//jsbin.com/vertical-spacing-weirdness/2/
需要注意的是,在 Firefox 中,当您使用可被 4 整除的像素字体大小值(4px、16px、20px 等)时,空格会出现在过渡中。
编辑解决/为什么
好吧,事实证明这里的问题是父级(div 或 table)和子级(span)之间的字体大小不同。严格的 doctype 样式更有意义,因为 div 高度无论如何都需要更改以适应 div 中的任何文本,而不是跨度中的任何文本。因此,在以下两个示例中,div 将具有相同的高度:
<div>text<span>...</span></div>
<div><span>...</span></div>
使用过渡样式,div 只是它必须的大小,在第二个示例中,它只会足够高以匹配 span 的 font-size,因为没有 div 的 font-size 大小的字符。
不过,字体大小为 4 的倍数的 Firefox 故障仍然很奇怪。
23.0.1
(每晚测试26.0a1 (2013-08-31)
:)
不知道我解释的够不够清楚,请问您是否需要澄清。