当跨度嵌套在具有不同背景的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>
要么
<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>