让Webkit关注<legend>边距

Question

可能重复:
无法在Safari和Chrome中为Legend元素添加边距

当我margin-bottom: 20px在<legend>标签上说时,我只是想让Chrome/Safari注意...

演示:http://jsfiddle.net/HNZWK/

<fieldset>
    <legend>Foo</legend>
    <div>Bar</div>
</fieldset>

legend {
    margin        : 0 0 20px 0;
    display       : block;
    position      : relative;
    border-bottom : 1px solid #000;
}

我似乎无法从领域集中"分离"传奇.下面的div被撞到了图例的高度以下(可以通过弄乱css中的图例高度来看到),但它忽略了底部边距.

有任何想法吗？其他浏览器在这里玩得很好......

Answer 1

通过使用-webkit-margin-collapse并margin-top自动解决第一件事legend(在本例中,div):

http://jsfiddle.net/HNZWK/5/

legend {
    margin-bottom : 20px;
}

legend + * {
    -webkit-margin-top-collapse : separate;
    margin-top                  : 20px;
}