9

我到处寻找,但无济于事。

我得到了<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;
}
4

4 回答 4

14

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

此外,您必须明确设置-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)

于 2011-03-17T13:01:32.073 回答
4

我在这个问题上挣扎了很多次,最终导致我放弃了图例标签,直到最近,我再次开始使用它来为我的标记添加更多语义含义。

这是我设计的一个修复程序,用于控制图例标签的布局相对于它的兄弟姐妹的外观:

标记:

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

从我上面提供的示例中,为了在 <legend> 标记上实现您想要的底部“边距”,您只需将顶部填充应用于字段集,等于您想要的顶部和底部边距的数量加上图例标签的显式高度。这会适当地向下推 <legend> 的兄弟姐妹。

如果您没有明确设置图例的高度,您可以在 Firebug 或 Chrome 开发者工具的 metric 选项卡中查看它,因为 font-size 会影响它的高度。

但是,是的,非常简单的解决方案,几天前我在处理客户项目时又遇到了它。然后遇到了这个问题,因为我今天试图对它做更多的研究。

编辑:我在发布这个答案后意识到,在我原来的修复中,我将填充应用于 <fieldset> 的父 <div> ,因为出于某种原因 Firefox 启动了 top:15px; 当填充应用于 <fieldset> 时,从顶部填充的底部开始。放置 padding-top 和 position:relative; 在父 div 上允许 <legend> 绝对定位在填充上,而不是被填充向下推。我已经编辑了上面的代码以反映我的发现。这个解决方案一开始很简单,现在对我来说吸引力不大,但它确实有效。这是我创建的一个页面,测试了两种定位 <legend> 标签的方法:图例标签定位:http://dl.dropbox.com/u/37971131/css-testing/forms.html

于 2011-09-13T15:16:16.237 回答
1

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)); 
}
于 2013-02-10T17:57:33.070 回答
0

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

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

希望这可以帮助!享受编码..

于 2016-12-08T13:21:32.810 回答