特色栏目： python 批处理 net编程 Javascript Php Asp Css Html5 Android seo centos

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

来源：互联网收集：自由互联发布时间：2021-06-13

当跨度嵌套在具有不同背景的div中时,在其上方和下方有一个小间隙. FF不会那样渲染. 这是html： html body div style="background-color:magenta" span style="background-color:cyan"Nested/span /div div style="backg

当跨度嵌套在具有不同背景的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 – 父母重写其孩子的样式
下一篇：css – 在菜单描述后添加虚线轨迹

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

相关文章