2

内联内容上方和下方的空间是什么？

可见这里：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)：）

不知道我解释的够不够清楚，请问您是否需要澄清。

4

2 回答 2

2

在父级上应用字体大小而不是自己跨越它，示例 > div div {font-size:13px;}

于 2013-09-05T04:27:05.957 回答
0

更正您的 css 文件中的以下 css。

span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
    font-size: 13px;
}

对于此 url http://jsbin.com/vertical-spacing-weirdness更改以下 CSS

table {
    border-spacing: 0;
    display: block;
    font-size: 13px;
}
span {
    background: none repeat scroll 0 0 #9999FF;
    display: inline-block;
}
于 2013-09-05T04:29:30.130 回答