当跨度嵌套在具有不同背景的 div 中时，其上方和下方会出现一个小间隙。 FF 不会这样渲染。
这是html：
<html>
<body>
<div style="background-color:magenta">
<span style="background-color:cyan">Nested</span>
</div>
<div style="background-color:cyan">Can you see that magenta line ?</div>
</body>
</html>
有人经历过这个吗？
谢谢
PS：我在 Xubuntu 9.10 下运行 chrome 5.0.307.9 beta
问题是默认的line-height。浏览器定义默认行高（“正常”）的方式各不相同，但许多浏览器确实将其设置为超过 1em（跨度的默认高度）。尝试将行高显式设置为 1em：
<span style="background-color:cyan;line-height:1em;">Nested</span>
or
<div style="background-color:magenta;line-height:1em;">
如果你想使用大于1em的行高，你需要标记跨度display:inline-block为了允许其背景颜色填充行的高度，而不仅仅是内联跨度的 1em：
<div style="background-color:magenta;line-height:2em;">
<span style="background-color:cyan;display:inline-block;">Nested</span>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
