23

編集: 2012 年 6 月 11 日現在、このバグは最終的に修正されました。https://bugs.webkit.org/show_bug.cgi?id=35981#c1

私はいくつかの非常に簡単なマークアップを持っています:

<form action="">
    <fieldset class="compact">                  
        <legend>Member Tools</legend>
        <label for="username">Username</label>
        <input name="username" id="username" type="text"/>
        <label for="password">Password</label>
        <input name="password" id="password" type="password" />
    </fieldset>
</form>

要素の下部に小さなマージンを追加しようとしていますがlegend、これは Firefox 2 と 3、および IE 5-8 で問題なく動作しますが、Safari と Chrome では a を追加しmarginても何もしません。私の知る限り、これlegendは別のブロック レベル要素であり、Webkit に a を追加しても問題はないはずmarginですが、それとも間違っていますか?

4

6 に答える 6

16

少し調査した後、これを解決するための最も「ハッキー」な方法であると思われる回避策を見つけました。ハッキングをターゲットとする厄介な Webkit を使用することは実際にはオプションではありませんでしたが、この-webkit-margin-collapse: separateプロパティは、説明されているように、要素のマージンが崩壊するのを防ぐのに機能しているように見えることがわかりました.

したがって、私のシナリオでは、フィールドセットの最初のラベル要素 (凡例のすぐ下) の上部にマージンを追加することで、次のように問題を修正します。

fieldset > label:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-top: 3px;
}

完璧ではありませんが、何もないよりはマシです。他のブラウザーでは、通常どおりマージンを縮小する必要があります。

誰かが興味を持っているなら、誰かが実際にこれについてバグレポートを提出しました # 35981

https://bugs.webkit.org/show_bug.cgi?id=35981

皆様のご意見をお寄せいただきありがとうございます。

于 2010-04-09T17:08:29.570 に答える
6

まあ、<legend>実際には「単なる別のブロック レベル要素」ではありません。そうあるべきかもしれませんが、実際には、要素が進むにつれて、かなり奇妙なことをすることになっているという点で、本質的にレイアウトの特異性があります。<legend>IE と Firefox では、要素に対するマージンとパディングの効果が大きく異なります。

<fieldset>ボックスの上部からコンテンツを分離したいだけですか? もしそうなら、フィールドセット自体で遊んでみpadding-topます。

于 2010-04-02T19:39:49.950 に答える
5

このような古いスレッドへの回答を投稿して申し訳ありませんが、実際にはハックを必要としない非常に簡単な解決策があります。fieldset要素の上部にパディングを追加するだけです。

fieldset { padding: 10px 0 0; }

これにより、私が言おうとしていることをもう少し明確にすることができます: http://jsfiddle.net/8fyvY/

于 2011-09-10T01:42:46.887 に答える
4

フィールドセットに1pxのパディングを追加すると、フィールドセットに含まれるマージンが突然認識されるようです（作成される間隔は1 pxを超えています）。

于 2011-07-14T15:15:55.870 に答える
1

すべてのブラウザーで凡例を下の境界線とマージンで機能させるには、凡例の内側にスパンを挿入し、スパンに境界線を配置し、凡例のマージンを 0 に設定し、凡例の下部にパディングを追加します。

例えば

legend {
  border: 0;
  margin-bottom: 0;
  padding-bottom: 20px;
}

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}
于 2013-06-19T04:47:04.963 に答える
1

私はこの問題に遭遇し、クロムではすべてがうまく見えますが、サファリが問題を引き起こします。その場合、このコードを追加すると

fieldset > legend:first-of-type
{
-webkit-margin-top-collapse: separate;
margin-bottom: 3px;
}

Chrome でマージンが 2 倍になります。次に、次のことを行うことにしました

fieldset > legend + *{
    padding-top:3px;
}

その助けを願っています。乾杯！

于 2013-01-10T13:17:56.597 に答える