Question

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

Answer 1

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

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

或

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

如果你想使用大于1em的行高，你需要标记跨度display:inline-block，以便让它的背景颜色填充行的高度而不仅仅是行的高度。内联范围：

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

Chrome无法正确渲染div中的span

1 个答案: