css - 无法在 webkit 中折叠 <br>？

Question

如本 jsfiddle 中所示:http://jsfiddle.net/qrbhb/

如果您采用此标记:

<div>There should be no gap between us</div>
<br />
<div>There should be no gap between us</div>

和这个 CSS:

div {
    background: #999;
}

br {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

所有基于 webkit 的浏览器都会显示一个等于父元素行高的间隙，而 firefox 和 IEs 不会显示间隙。我不知道谁在遵循这里的规范，但我终其一生都无法让它在所有浏览器中显示相同，这让我发疯。有什么想法吗？

编辑:对不起各位，我在看一个相当复杂的布局，并错误地认为有些元素是 float 的，但实际上不是。 float 元素的行为符合预期。

Answer 1

奇怪。我可以看到正在发生的事情的一些逻辑。它似乎使用前面元素的行高作为高度。例如，如果您将其添加到 <br /> 之前如图:

<div class="weird" /><br />

...然后设置它的行高:

div.weird {
    line-height: 0;
}

(jsFiddle here)

...然后是 <br />失去它的高度。

因此，我猜测换行符“继承”了——尽管这是个错误的词——前面一段文本的高度。我不确定这到底是怎么回事，但这是我能想到的最合理的解释。

但实际上，我和其他人一样——如果您不想在行与行之间换行，就不要使用换行符。无论如何，如果您要清除一些非语义的东西，我会接受它并使用 <div> ;网络社区的实际元素会理解并原谅你:)