Question

可能重复：
Cannot add margin to Legend element in Safari & Chrome

当我在margin-bottom: 20px代码上说<legend>时，我只是想让Chrome / Safari得到关注......

<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;
}

Answer 2

许多浏览器似乎都有图例元素的问题。我的建议是将你放在图例元素中的文字放在一个跨度中。然后将所有样式应用到该范围。

Answer 3

我在Safari中看到同样的事情。

也许您可以使用填充代替。这似乎有效。

http://jsfiddle.net/HNZWK/3/

让Webkit关注<legend> margin </legend>

3 个答案: