内联元素和标记空白渲染问题答案

【问题标题】：inline elements, and markup white space rendering issues内联元素和标记空白渲染问题
【发布时间】：2010-01-14 16:53:43
【问题描述】：

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

我认为这个问题几乎已经消失了，但我今天大声疾呼，问题仍然存在。奇怪的是，问题并不局限于特定的浏览器。它在 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 标记的整个宽度。

鉴于跨浏览器的一致性，这可能实际上是按其应有的方式呈现？没有恢复到旧的评论技巧（在一行的末尾开始评论并扩展到下一行的开头），任何人都知道解决方法或为什么这样做？

理想情况下，我会改为浮动我的 LI，但由于其他一些问题，最好保持内联。

【问题讨论】：

标签： html css whitespace

【解决方案1】：

是的，当涉及到内联元素时，空白就是空白。这几乎总是你想要的。举个例子：

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

如果最终呈现为：

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

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

【讨论】：

这个例子让问题变得如此明显，以至于我必须拍拍我的额头并说出'doh！所以，是的，显然这是预期的，并且在这种情况下非常有意义。谢谢！
我同意这个 except 在回车的情况下 - 为什么将 \n 呈现为“”？以及用于精细控制的 CSS 空白选项怎么样？
另外，它会从标签内部立即删除空格、双空格等 - 根据您的理由，这也应该保留。
有一个 white-space 属性可以对这种行为进行一些控制：w3.org/TR/CSS21/text.html#propdef-white-space 所有空格的运行都等同于单个空格字符，以允许标记布局的灵活性 - 例如不必有大量的标记来避免换行。

【解决方案2】：

我相信这是设计使然。
您在源代码中包含了空格（即使是回车），因此浏览器会忠实地呈现它。除了确保元素之间没有空白之外，我怀疑还有其他方法可以解决这个问题。

【讨论】：

【解决方案3】：

您可以将容器的字体大小设置为 0，例如将其放入 div 中，然后在 LI 项中设置相应的字体大小

【讨论】：