HTML p-element和fieldset-element的跨浏览器问题，bug或意图，如何处理？

Question

我的问题是：这是一个错误或预期的行为，我应该在浏览器的bugtrackers上报告，还是只是找到一个css修复？

以下是重现此行为所需的最少代码量的小提琴：http://jsfiddle.net/tjVvp/8/

我在Firefox和Chromium中对此进行了测试。该问题依赖于<p>元素和fieldset css代码的组合：

fieldset {
    padding: 0;
    margin: 0;
    border: 0;
}

如果删除<p>，则不会出现此问题。在这种情况下，Firefox和Chromium中的页面都是相同的。

如果<p>元素存在，但没有fieldset元素的CSS代码，则Firefox和Chromium都会以相同的方式呈现页面。

他们需要同时在场，否则问题就不会发生。

如果fieldset元素的css代码存在，那就是页面的呈现方式不同，如小提琴中所示。

它变得更加复杂：仅当所有3（边距，填充和边框）都设置为值时才会出现问题。如果删除其中一个声明，浏览器将以相同的方式呈现页面。保留哪个组合无关紧要，只有当声明了所有3个属性时才会出现差异。然后，只有<p>元素存在。

所以，从本文顶部重复我的问题：这是一个错误或预期的行为，我应该在浏览器的bugtrackers上报告这个问题，还是只是找到一个css修复程序？

Answer 1

我认为您所指的可能是<p>的默认保证金。如果您检查<p>标记，则可以看到两边的边距：

另请注意，顶部的边距不会<p>本身应用于其中一个祖先，这称为margin collapsing。

参考

• CSS 2.1 Spec - Collapsing margins

Answer 2

尝试这个，我试着小提琴，它工作正常。

fieldset, p, label {
    padding: 0;
    margin: 0;
    border: 0;
}

header {
    display: block;
    width: 100%;
    height: 40px;
    background-color: red;
}

legend {
    margin: 2px 0px;
    padding:0px 10px 0 0;
    float: left;
}