图例标记和Chrome [英] legend tag and Chrome

问题描述

我看过无处不在，但无济于事。

I've looked everywhere but to no avail.

在表单中我有一个< legend> ，在每个浏览器中都会显示，铬。它就像它坐在田野之外，或者它就像它在下一个元素的顶部。这是非常讨厌。

I got a <legend> in a form, which displays as I want in every browsers, except in Chrome. It's like it sits outside of the fieldset, or it's like it goes on top of the next element. And it's very annoying. I can't even put margins on it.

为什么会以这种方式显示？

Why does it display like in that way?

是否有解决方法？

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

推荐答案

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

This is a known issue with the legend element in webkit browsers. There are no clean workarounds for the legend element itself, but you could instead add the margin to the first element that follows the legend.

此外，在该元素上设置 -webkit-margin-collapse：separate ，使其正常工作。尝试使用：

Also, you'll have to explicitly set -webkit-margin-collapse: separate on that element to make it work properly. Try using this:

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

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

（找到这里的答案：无法在Safari和Chrome浏览器中为图例元素添加margin）

(answer found here: Cannot add margin to Legend element in Safari & Chrome)

这篇关于图例标记和Chrome的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！