3

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

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

我已经在 Firefox 和 Chromium 中对此进行了测试。该问题取决于<p>元素和fieldsetcss 代码的组合：

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

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

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

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

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

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

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

4

2 回答 2

0

我认为您所指的可能是<p>. 如果您检查<p>标签，您可以看到两边的边距：

在此处输入图像描述

另请注意，顶部的边距不会应用于<p>其祖先之一，这称为边距折叠。

参考

于 2013-03-30T05:19:18.937 回答
0

试试这个，我在小提琴上试了一下，效果很好。

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;
}
于 2013-04-01T05:08:24.790 回答