css – Chrome无法正确渲染div中的span

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

解决方法

问题是默认的行高.浏览器在定义默认行高(“正常”)方面有所不同,但许多浏览器的触摸次数超过1em(跨度的默认高度).尝试将行高显式设置为1em：

<span style="background-color:cyan;line-height:1em;">Nested</span>

要么

<div style="background-color:magenta;line-height:1em;">

如果要使用大于1em的行高,则需要标记跨度显示：inline-block,以允许其背景颜色填充行的高度,而不仅仅是内联跨度的1em：

<div style="background-color:magenta;line-height:2em;">
  <span style="background-color:cyan;display:inline-block;">Nested</span>
</div>

css – Chrome无法正确渲染div中的span

解决方法

相关文章