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

Posted 2023-02-16

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

【英文标题】：Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit)

【发布时间】：2011-02-03 20:17:02

【问题描述】：

编辑：截至 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 应该没有问题，还是我不正确？

【问题讨论】：

Google 可以让 Quake II 在 Safari 和 Chrome 上以 html 5 运行。然而，我也与 CSS 异常作斗争。客户端世界中的讽刺从未停止让我感到惊讶。 googlewebtoolkit.blogspot.com/2010/04/look-ma-no-plugin.html

两年多仍未解决！ bugs.webkit.org/show_bug.cgi?id=35981

这个问题在 2012 年 5 月发布的最新 Windows 版本 (5.1.7) 中仍然存在。Apple 不再继续为 Windows 开发 Safari - 所以永远不要期待修复。跨度>

【参考方案1】：

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

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

【讨论】：

感谢您的回复。回去尝试在规范中找到它，我实际上无法说出它应该是什么，无论我将显示设置为什么都没有效果。我会尝试调整字段集的填充，但我希望增加图例底部和第一个标签之间的距离。

嗯，<legend> 是对昔日的回归之一。您可以完全设置它的样式有点令人惊奇:-) 我在自己的应用程序中有一些样式化的字段集，我计划用普通的旧<div> 块重新做那些某个点，以便我可以清理一些浏览器差异（主要是关于水平定位，但这是同一类问题）。

【参考方案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

感谢大家的意见。

【讨论】：

你觉得这个解决方案怎么样？ legend + label -webkit-margin-top-collapse: separate; margin-top: 3px; 它应该更通用，并且有更广泛的浏览器支持（CSS2 而不是 CSS3）

【参考方案3】：

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

【参考方案4】：

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

fieldset  padding: 10px 0 0; 

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

【讨论】：

此填充在 IE8 和 7 中的工作方式不同。它将填充放在图例上方。

太奇怪了。鉴于图例在字段集中，将填充应用于图例上方是否更有意义，就像 ie7 和 8 一样？

理论上是个好主意，但是如果<fieldset> 中有多个<legend> 标签，那么您仍然不会得到想要的结果。

一个<fieldset>元素不应该最多只有一个<legend>吗？

@Nic：HTML 4 DTD 和 HTML 5 spec 更加严格：<legend> 可以作为<fieldset> 的第一个子元素存在，仅此而已（尽管@987654332 的 HTML5 描述@ 声明“组的名称由作为 fieldset 元素的子元素的第一个图例元素（如果有）给出”，这可以理解为后面的 <legend>s 被忽略）。

【参考方案5】：

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

fieldset > legend:first-of-type

-webkit-margin-top-collapse: separate;
margin-bottom: 3px;

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

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

希望有所帮助。干杯！

【参考方案6】：

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

例如

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


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