html - 内联元素和标记空白渲染问题

Question

回到过去，如果在源标记中我们也有空白，我们不得不处理浏览器在元素之间添加空白的问题。

我以为这个问题几乎已经消失了，但我今天对一个问题仍然存在的情况大发雷霆。奇怪的是问题并不局限于特定的浏览器。它在 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，但由于一些其他问题，最好保持内联。

Answer 1

是的，当涉及到内联元素时，空白就是空白。这几乎总是正是你想要的。例如，以下内容:

<p>I <em>really</em> <strong>really</strong> want that whitespace.</p>

如果最终呈现为:

我*真的***真的**想要那个空格。

如果所有浏览器都以某种方式呈现它，很可能它们是对的而你是错的。如果除 IE 之外的所有浏览器都以某种方式呈现它，那就加倍了......