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

これは、legendWebkit ブラウザーの要素に関する既知の問題です。凡例要素自体に明確な回避策はありませんが、代わりに、凡例に続く最初の要素にマージンを追加できます。

-webkit-margin-collapse: separateまた、適切に機能させるには、その要素を明示的に設定する必要があります。これを使用してみてください：

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

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

(答えはここにあります: Safari & Chrome (WebKit) では `margin` を `<legend>` 要素に追加できません)

于 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 開発者ツールのメトリック タブで確認できます。

しかし、ええ、非常に単純な解決策です。数日前にクライアントプロジェクトに取り組んでいるときに、再び遭遇しました。今日、さらに調査をしようとしていたときに、この質問に出くわしました。

編集: この回答を投稿した後、元の修正で、何らかの理由で Firefox が top:15px; を開始するため、 <fieldset> の親 <div> にパディングを適用したことに気付きました。パディングが <fieldset> に適用される場合、上部のパディングの下から。padding-top と position:relative; の配置 親 div では、 <legend> がパディングによって押し下げられるのではなく、パディングの上に絶対に配置できるようになりました。上記のコードを編集して、調査結果を反映させました。最初は単純だったこのソリューションは、今ではあまり魅力的ではありませんが、確実に機能します。以下は私が作成したページで、<legend> タグを配置する 2 つの方法をテストしています。

于 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 に答える