Chrome doesn't render span in div properly_问答_开发者

Chrome doesn't render span in div properly

开发者 https://www.devze.com 2022-12-21 15:52 出处：网络

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.

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>

<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>

Chrome doesn't render span in div properly

精彩评论

关注公众号

热门标签

图文推荐

Chrome doesn't render span in div properly

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：