23

编辑：截至 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 中添加 amargin没有任何作用。据我所知legend，这只是另一个块级元素，Webkit 添加 a 应该没有问题margin，还是我不正确？

4

6 回答 6

16

经过一番研究，我找到了一种解决方法，我认为这是解决它的最不“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

感谢大家的意见。

于 2010-04-09T17:08:29.570 回答
6

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

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

于 2010-04-02T19:39:49.950 回答
5

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

fieldset { padding: 10px 0 0; }

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

于 2011-09-10T01:42:46.887 回答
4

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

于 2011-07-14T15:15:55.870 回答
1

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

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

我在 Chrome 上获得双倍保证金。然后就决定做以下

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

希望有所帮助。干杯!

于 2013-01-10T13:17:56.597 回答
1

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

例如

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

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}
于 2013-06-19T04:47:04.963 回答