无法在 Safari 和 Chrome (WebKit) 中将 `margin` 添加到 `<legend>` 元素

Question

编辑：截至 2012 年 6 月 11 日，此错误终于得到修复！ https://bugs.webkit.org/show_bug.cgi?id=35981#c1

我有一些非常简单的标记：

<form action="">
    <fieldset class="compact">                  
        <legend>Member Tools</legend>
        <label for="username">Username</label>
        <input name="username" id="username" type="text"/>
        <label for="password">Password</label>
        <input name="password" id="password" type="password" />
    </fieldset>
</form>

我试图在 legend 元素的底部添加一个小边距，这在 Firefox 2 和 3 以及 IE 5-8 中都可以正常工作，但是在 Safari 和 Chrome 中添加 margin 没有任何作用.据我所知legend 只是另一个块级元素，Webkit 添加margin 应该没有问题，还是我不正确？

Answer 1

嗯，<legend> 真的不是“只是另一个块级元素。”也许应该是这样，但事实是它本质上将具有布局特性，因为它应该做一些非常奇怪的事情，随着元素的变化。在 IE 和 Firefox 之间，margin 和 padding 对<legend> 元素的影响有很大不同。

您只想将 <fieldset> 内容与框顶部分开吗？如果是这样，我会尝试使用字段集本身的padding-top。

Answer 2

经过一番研究，我找到了一种解决方法，我认为这是解决它的最不“hacky”的方法。使用讨厌的 webkit 定位黑客确实不是一种选择，但我发现 -webkit-margin-collapse: separate 属性似乎可以阻止元素的边距折叠，就像它描述的那样。

所以在我的场景中，下面通过在字段集中的第一个标签元素的顶部（图例正下方）添加边距来解决问题：

fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}

不完美，但总比没有好，其他浏览器应该只是正常折叠边距。

如果有人好奇，确实有人确实提交了关于这个 #35981 的错误报告

https://bugs.webkit.org/show_bug.cgi?id=35981

感谢大家的意见。

Answer 3

我刚刚发现向字段集添加 1 像素的填充似乎让它突然意识到它包含的边距（创建的间距超过 1 像素）。

Answer 4

很抱歉为这样一个旧线程发布答案，但实际上有一个非常简单的解决方案，不需要任何黑客。您需要做的就是在 fieldset 元素的顶部添加填充。

fieldset { padding: 10px 0 0; }

这可能会让我想说的更清楚一点：http://jsfiddle.net/8fyvY/

Answer 5

我遇到了这个问题，在 chrome 上一切看起来都很好，但是 safari 出了问题。 在那种情况下，如果我添加此代码

fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}

我在 Chrome 上获得双倍边距。然后就决定执行以下操作

fieldset > legend + *{
    padding-top:3px;
}

希望有所帮助。干杯！

Answer 6

为了让图例在所有浏览器中使用底部边框和边距，我在图例中插入一个跨度，将边框放在跨度上，将图例边距设置为 0，然后在图例底部添加填充。

例如

legend {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}