html - 图例标签和 Chrome

Question

我到处都找遍了，但无济于事。

我有一个 <legend>以一种形式，在除 Chrome 之外的所有浏览器中按我的意愿显示。就像它位于字段集之外，或者它位于下一个元素之上。这很烦人。我什至不能在上面加上边距。

为什么会这样显示？

有解决办法吗？

HTML:

  <fieldset class="col-12-box-bottom add-extras">
    <legend class="plus">Add Promotion Code</legend>
    <ul id="promo-fields">
      <li><input class="field-small" type="text" /></li> 
      <li><button class="but-sec" type="submit">Apply</button></li>
    </ul>
  </fieldset>

CSS:

.add-extras legend{
    width: 260px;
    height: 0px;
    border: 1px solid red;
    display: block;
    margin-top: 10px;
}
.add-extras fieldset{
    position: relative;
}
.add-extras ul{
    padding: 0 0 20px 0 !important;
    overflow: hidden;
}
.add-extras li{
    list-style-type: none;
    float: left;
    margin: 0 18px 0 0;
}
.add-extras li:last-child a{
    color: #afafaf;
    display: block;
    margin: 27px 0px 0 0;
}
fieldset.add-extras{
    margin: 0px 0 23px 0;
}
.add-extras label{
    float: none;
    display: block;
    text-align: left;
    width: 110px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

Answer 1

这是 webkit 浏览器中 legend 元素的一个已知问题。图例元素本身没有干净的解决方法，但您可以将边距添加到图例后面的第一个元素。

此外，您必须在该元素上显式设置 -webkit-margin-collapse: separate 以使其正常工作。尝试使用这个:

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

http://jsfiddle.net/JLsPs/1/

(在这里找到答案:Cannot add `margin` to `<legend>` element in Safari & Chrome (WebKit))