无法在Safari和Safari中的`< legend>`元素中添加`margin' Chrome（WebKit） [英] Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit)

问题描述

编辑：自2012-06-11这个bug已经终于修复了！ https://bugs.webkit.org/show_bug.cgi?id=35981# c1

EDIT: As of 2012-06-11 this bug has been finally fixed! https://bugs.webkit.org/show_bug.cgi?id=35981#c1

我有一些很简单的标记：

I have some pretty straightforward markup:

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

我试图在 / code>元素，这在Firefox 2和3以及IE 5-8工作正常，但是在Safari和Chrome中添加 margin 什么都不做。据我所知， legend 只是另一个块级元素，Webkit应该没有问题添加 margin 或者我不正确？

I am attempting to add a small margin to the bottom of the legend element, this works just fine in Firefox 2 and 3 as well as IE 5-8, however in Safari and Chrome adding a margin does nothing. As far as I know legend is just another block level element and Webkit should have no issue adding a margin to it, or am I incorrect?

推荐答案

经过一番研究，我发现了一个解决方法， hacky方法解决它。使用令人讨厌的webkit目标攻击真的不是一个选项，但我发现， -webkit-margin-collapse：separate 属性似乎在停止元素的边距

After a bit of research I found a work-around for this that I believe to be the least "hacky" method for solving it. Using the nasty webkit targeting hacks really weren't an option, but I found that the -webkit-margin-collapse: separate property seems to work in stopping the margins on the elements from collapsing just as it describes.

因此，在我的场景中，以下内容通过在第一个标签元素的顶部（图例下方右侧）添加边距来修复此问题字段集：

So in my scenario the following fixes the issue by adding a margin to the top of the first label element (right below the legend) in the fieldset:

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

不完美，但比没有更好，其他浏览器应该正常折叠边距。

Not perfect, but better than nothing, other browsers should just collapse the margins normally.

如果有人好奇，有人真的提交了一个关于此＃35981的错误报告

If anyone is curious someone actually did file a bug report about this # 35981

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

感谢大家的意见。

这篇关于无法在Safari和Safari中的`< legend>`元素中添加`margin' Chrome（WebKit）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！