Question

我到处都看，但无济于事。

我在表单中有一个<legend>，除了Chrome之外，它在每个浏览器中显示我想要的内容。它就像它位于fieldset之外，或者就像它位于下一个元素之上。这非常烦人。我甚至不能把利润放在上面。

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

是否有解决方法？

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

Answer 2

我多次努力解决这个问题，最终导致我放弃了传说标记直到最近，我已经开始再次使用它来为我的标记添加更多语义含义。

这是我设计的一个修复程序，用于控制与其兄弟姐妹相关的图例标记布局的外观：

标记：

<div class="fieldset">
  <fieldset>
    <legend>Form Section</legend>
    <div class="field_row">
      <label for="first_name">First Name</label>
      <input id="first_name" name="first_name" type="text">
    </div>
    <div class="field_row">
      <label for="last_name">Last Name</label>
      <input id="last_name" name="last_name" type="text">
    </div>
  </fieldset>
</div>

样式：

.fieldset {
  padding-top:48px; /*legend height(18px) + top value(15px) + bottom spacing(15px) */
  position:relative;
}
legend {
  height:18px; /* Default Height of non-styled legend element with default font-size of 16px as tested at time of this posting */
  left:15px;
  /*margin:15px 0;*/ /* Margins initially trying to achieve */
  position:absolute;
  top:15px; /* replaces top margin-top:15px; */
}

从上面提供的示例中，为了实现＆lt; legend＆gt;的底部“边距”。你想要的标签，你只需要在字段集上应用一个顶部填充，等于你想要的顶部和底部边距的数量加上图例标签的显式高度。这会适当地压低＆lt; legend＆gt;的兄弟姐妹。

如果您没有明确设置图例的高度，可以在Firebug或Chrome开发者工具的公制标签中查看，因为字体大小会影响它的高度。

但是，非常简单的解决方案，我刚刚在客户项目工作时再次遇到它。然后遇到了这个问题，因为我今天正试图对它进行更多的研究。

编辑：我在发布此答案后意识到，在我原来的修复程序中，我将填充应用于父级＆lt; div＆gt; ＆lt; fieldset＆gt;因为某些原因Firefox开始排名第一：15px;当填充应用于＆lt; fieldset＆gt;时，从顶部填充的底部开始。填充顶部和位置：相对;在父div上允许＆lt; legend＆gt;绝对定位在填充上，而不是被填充向下推。我编辑了上面的代码以反映我的发现。这个开始简单的解决方案现在对我来说不那么吸引人了，但绝对有效。这是我创建的一个页面，测试两种定位＆lt; legend＆gt;的方法。标记：Legend tag positioning: http://dl.dropbox.com/u/37971131/css-testing/forms.html

Answer 3

Stephan Muller提出的方法仅在后面的HTML元素可见时才有效。在我的情况下，如果没有对HTML代码进行潜在的大规模重组，这并不总是可行的。因此，除了他的CSS代码

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

只需应用以下jQuery命令，它基本上只插入一个空div（高度为0 px）但现在匹配CSS选择器，在每种情况下添加边距：

$('legend + *').not(':visible').each(function() {
  $('<div></div>').insertBefore($(this)); 
}

Answer 4

如果无法更新模板，您可以使用此脚本，只需将图例标记包装在div标记内

jQuery('legend').each(function() {
 jQuery(this).wrap( "<div></div>" ); 
});

希望这有帮助！享受编码..

图例标记和Chrome

4 个答案: