23


7

SafariとChrome(WebKit)の `<legend>`要素に `margin`を追加できません

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

かなり簡単なマークアップがあります。

        Member Tools
        Username

        Password

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

6 Answer


16


少し調査した結果、これを解決するための最も「ハッキングな」方法であると信じている回避策を見つけました。 ハッキングを標的とする厄介なWebkitを使用することは実際にはオプションではありませんでしたが、 `-webkit-margin-collapse:separate`プロパティは、要素のマージンが説明どおりに崩壊するのを防ぐのに役立つようです。

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

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

完璧ではありませんが、何よりも優れているため、他のブラウザは通常、マージンを折りたたむだけです。

誰かが好奇心If盛なら、誰かが実際にこれに関するバグレポートを提出しました#35981

皆さんの意見をありがとう。


5


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

単に分離したいですか?

ボックスの上部からのコンテンツ? もしそうなら、私はフィールドセット自体の「パディングトップ」で遊んでみます。


5


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

fieldset { padding: 10px 0 0; }

これは、私が言いたいことをもう少し明確にするかもしれません:http://jsfiddle.net/8fyvY/


4


フィールドセットに1ピクセルのパディングを追加すると、そこに含まれるマージンが突然認識されるようです(作成された間隔は1ピクセル以上です)。


1


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

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

Chromeで2倍のマージンが得られます。 その後、次のことを行うことにします

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

お役に立てば幸いです。 乾杯!


1


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

e.g.

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

legend span {
  display: block;
  border-bottom: 2px solid #f0ebe6;
}