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

Question

编辑:截至2012-06-11这个bug已经被修复了!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: 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 2

好吧,<legend>真的不是 "只是另一个块级元素".也许它应该是,但事实是它本身具有布局特性,因为它应该做一些非常奇怪的事情,因为元素会去.在IE和Firefox之间,边距和填充对<legend>元素的影响有很大不同.

您是否想要<fieldset>从框顶部分离内容？如果是这样,我会尝试使用padding-topfieldset本身.

Answer 3

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

fieldset { padding: 10px 0 0; }

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