回到过去,如果在源标记中我们也有空白,我们不得不处理浏览器在元素之间添加空白的问题。
我以为这个问题几乎已经消失了,但我今天对一个问题仍然存在的情况大发雷霆。奇怪的是问题并不局限于特定的浏览器。它在 Firefox、Safari、Chrome 和 Opera 中以相同的方式出现问题,在 IE 中仅略有不同。
示例 CSS:
<style type="text/css">
li {
display: inline;
background: pink;
margin: 0px;
padding: 10px 0px;
}
li a {
background: green;
margin: 0px;
padding: 0px;
}
</style>
示例标记:
<ul>
<li>
<a href="#">hello</a>
</li>
<li>
<a href="#">world</a>
</li>
</ul>
<ul>
<li><a href="#">hello</a></li>
<li><a href="#">world</a></li>
</ul>
<ul>
<li><a href="#">hello</a></li><li><a href="#">world</a></li>
</ul>
只有最后一个 UL 以我希望的方式显示...A 标记跨越容器 LI 标记的整个宽度。
考虑到跨浏览器的一致性,这可能实际上是按应有的方式呈现?没有恢复到旧的评论技巧(在一行的末尾开始评论并扩展到下一行的开头)有人知道解决这个问题的方法或者为什么这样做吗?
理想情况下,我会 float 我的 LI,但由于一些其他问题,最好保持内联。
最佳答案
是的,当涉及到内联元素时,空白就是空白。这几乎总是正是你想要的。例如,以下内容:
<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>
如果最终呈现为:
我*真的***真的**想要那个空格。
如果所有浏览器都以某种方式呈现它,很可能它们是对的而你是错的。如果除 IE 之外的所有浏览器都以某种方式呈现它,那就加倍了......
关于html - 内联元素和标记空白渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2065871/