代码之家 › 专栏 › 技术社区 › Graham Conzett

无法将'margin'添加到Safari Chrome(WebKit)中的'<legend>>'元素

legend webkit css html

Graham Conzett · 技术社区 · 16 年前

编辑 :截至2012-06-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 什么也不做。据我所知 传奇 只是另一个块级元素,WebKit在添加 边缘 还是我错了?

6 回复 | 直到 10 年前

Graham Conzett 16 年前

经过一番研究,我找到了一个解决这个问题的方法,我认为这是解决这个问题最简单的“黑客”方法。使用针对黑客的恶意Webkit确实不是一种选择,但我发现 -webkit-margin-collapse: separate 属性似乎可以阻止元素上的边距像它描述的那样崩溃。

因此,在我的场景中,以下内容通过在字段集中第一个标签元素的顶部(在图例的正下方)添加一个边距来解决此问题:

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

不完美,但总比什么都没有好,其他浏览器应该只是正常地折叠页边距。

如果有人好奇,有人确实提交了一份关于这件事的错误报告

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

谢谢大家的意见。

Pointy 16 年前

好, <legend> 真的? 不是 “只是另一个块级元素。”也许它应该是,但事实上,它本身就具有布局特性,因为它应该做一些非常奇怪的事情,就像元素一样。在IE和Firefox之间,边缘和填充对 <传奇& GT; 元素大不相同。

你想分开吗 <fieldset> 盒子顶部的内容?如果是的话,我会尝试和 padding-top 字段集本身。

Wex 15 年前

很抱歉给这么一个旧的线程发了一个答案,但实际上有一个非常简单的解决方案,不需要任何黑客攻击。你所要做的就是在你的 fieldset 元素。

fieldset { padding: 10px 0 0; }

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

Evanss 15 年前

我刚刚发现在字段集中添加1px的填充似乎使它突然意识到它包含的空白(创建的间距超过1px)。

Kaloyan Stamatov 13 年前

我遇到了这个问题,在Chrome上一切都很好,但Safari解决了这个问题。在这种情况下,如果我添加这个代码

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

我在铬合金上得到了双倍的利润。然后决定做以下的事情

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

希望有帮助。干杯!

harimau 13 年前

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

例如

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

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