无法将“margin”添加到 Safari 和 Safari 中的“”元素Chrome（网络工具包）

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

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

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

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

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

如果有人好奇，确实有人提交了有关此问题的错误报告 # 35981

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

感谢大家的意见。

Answer 2

好吧，

确实不是“只是另一个块级元素”。也许应该如此，但事实是，它本质上具有布局特性，因为随着元素的发展，它应该做一些非常奇怪的事情。在 IE 和 Firefox 之间，

元素上的边距和填充的效果有很大不同。

您是否只想将

内容与框顶部分开？如果是这样，我会尝试使用字段集本身的 padding-top 。

Answer 3

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

fieldset { padding: 10px 0 0; }

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

Answer 4

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

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;
}