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

编辑:截至2012-06-11这个bug已经被修复了!https://bugs.webkit.org/show_bug.cgi?id=35981#c1

我有一些非常简单的标记:

    
                  
        
Member Tools
        Username
        
        Password
        
    

我试图在legend元素的底部添加一个小的边距,这在Firefox 2和3以及IE 5-8中工作得很好,但是在Safari和Chrome中添加margin无效.据我所知legend,只是另一个块级元素,Webkit应该没有问题添加margin到它,或者我不正确？

经过一些研究后,我找到了解决这个问题的方法,我认为这是解决问题的最简单的"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

感谢大家的投入.

好吧,

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

元素的影响有很大不同.

您是否想要

fieldset { padding: 10px 0 0; }