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标签的整个宽度。

考虑到浏览器之间的一致性，这可能实际上是应该渲染的吗？如果没有恢复旧的评论黑客（开始评论一行的结尾并扩展到下一行的开头），任何人都知道这方面的解决方法或为什么这样做它会做什么？

理想情况下，我会漂浮我的LI，但由于其他一些问题，保留内联将是首选。

Answer 1

是的，在内联元素方面，空白是空白。这几乎总是你想要的。举个例子，如下：

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

如果最终呈现为：

，那就太难了

我真的非常想要那个空白。

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

Answer 2

我相信这是设计的您已在源中包含空格（即使它是回车符），因此浏览器会忠实地呈现此内容。我怀疑除了确保你的元素之间没有空白之外，还有办法解决这个问题。

Answer 3

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

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

3 个答案: