开发者

Chrome doesn't render span in div properly

When a span is nested in a div with a different background there's a small gap above and below it. FF doesn't render like that.

Here is the 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>

Does anyone has experienced this ?

Thanks PS: I'm running chro开发者_JS百科me 5.0.307.9 beta under Xubuntu 9.10


The problem is the default line-height. Browsers vary on how they define the default line-height ("normal") but many do make it a touch more than 1em (the default height of a span). Try explicitly setting the line-height to 1em:

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

or

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

If you want to use a line-height greater than 1em, you'll need to mark the span display:inline-block in order to allow its background color to fill the height of the line rather than just the 1em of the inline span:

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜