0

很长一段时间以来，我在 Firefox 和 IE 中遇到了一些垂直间距问题。

我*在我的 css 中使用选择器将边距应用于某个容器元素中的所有内容。在 Chrome 中运行良好，但在 FF 和 IE 中，我似乎从无处获得了神秘的额外填充，您可以在此处观察到：http: //jsfiddle.net/XrVXF/3/。

事实证明我有两个不同的问题。一是非 Chrome 浏览器会使用选择器选择元素*并应用边距，边距会显示在浏览器中！即使该元素对 Firebug 之类的东西是不可见的。这应该被认为是一个错误吗？您可能会问，链接元素在 body 标记内做什么业务。好吧，我可能可以避免它，但这是在我的网站上做一些事情的最简单方法。这个页面说*选择器应该只适用于我正在使用的 HTML5 中的块级元素，所以从这个意义上说，在我看来，至少 Firefox 正在出现问题，如果它们应该有适当的 HTML5 支持，IE 也是如此. 既然我知道了这一点，我可以解决它，但是也许还有其他我应该担心的因素？（似乎不适用于脚本或样式标签。）将边距应用于大量 html 元素而不是 html 元素会更好*吗？

另一个奇怪的事情，你可以在我链接的小提琴中观察到，底部的 clearfix（在示例中不是必需的，但在我的网站上）也拾取边距并将它们应用于 FF 和 IE 但不是在铬。哪个是“正确”的行为？奇怪的是，我注意到关闭溢出：隐藏，可以防止 clearfix 占用空间，并且似乎对我的网站没有任何不利影响。溢出设置为隐藏的目的是什么？

更正：糟糕，当我打算使用 .clearfix （在浮动内容之后附加内容）时，我使用了 .clear，这似乎工作正常并且没有边距问题。

4

1 回答 1

2

这应该被认为是一个错误吗？

考虑到您将样式应用于最初不应该出现的位置的元素（link在body？？？），这是任何人的猜测。它们没有出现在 Firebug 中的可能原因是 Firebug 不希望它们出现。

说真的，我对你小提琴中发生的事情的最佳猜测是：

  • Chrome 有一个 UA 样式的link元素到display: none. 我想它对属于headelement 和 not的任何其他元素都是一样的body。

  • 其他浏览器没有元素的默认display样式link，而是依赖于head必须display: none隐藏属于head元素的所有内容。因此，当您将 a 放置在link内时body，它会以边距显示，因为它以 的初始值显示display: inline。

    FWIW，如果你给它一个样式display: block，它的边距会塌陷display: none，它会产生与Chrome一样的明显效果。

同样，这是基于您小提琴中的无效标记，所以我不能说哪个浏览器（如果有）是对还是错，因为所有规范都说不应该呈现页头。*此外，关于这是否是不使用选择器的原因，或不编写无效 HTML 的原因，或两者兼而有之的提示参数/辩论...

于 2012-08-25T23:05:52.067 回答