Chrome无法正确呈现跨度 [英] Chrome doesn't render span in div properly
问题描述
这里是html：
< HTML>
< body>
< div style =background-color：magenta>
< span style =background-color：cyan>嵌套< / span>
< / div>
< div style =background-color：cyan>你能看到洋红色线吗？< / div>
< / body>
< / html>
有没有人遇到过这种情况？
感谢
PS：我在Xubuntu 9.10下运行chrome 5.0.307.9 beta
问题是默认的行高。浏览器在它们如何定义默认行高（普通）方面有所不同，但许多浏览器的触摸超过1em（跨度的默认高度）。尝试明确设置行高为1em：
< span style =background-color：cyan; line-height： 1em的;>嵌套< /跨度>
或
< div style =background-color：magenta; line-height：1em;>
如果要使用大于1em的行高，则需要标记跨度 display：inline-block 以允许其背景颜色填充线条的高度，而不仅仅是内嵌范围的1em：
< div style =background-color：magenta; line-height：2em;>
< span style =background-color：cyan; display：inline-block;>嵌套< / span>
< / div>
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 chrome 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>
这篇关于Chrome无法正确呈现跨度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
