<legend>マージン

可能性の重複に注意を払うためにWebkitの取得：
Cannot add margin to Legend element in Safari & Chrome <legend>マージン

私は単に私が<legend>タグにmargin-bottom: 20pxを言うときの注意を払うようにクローム/サファリを取得しようとしています...

<fieldset> 
    <legend>Foo</legend> 
    <div>Bar</div> 
</fieldset> 

legend { 
    margin  : 0 0 20px 0; 
    display  : block; 
    position  : relative; 
    border-bottom : 1px solid #000; 
}

フィールドセットから凡例を「切り離す」ようには見えません。以下のdivは、伝説の高さより下にぶつかっています（cssで伝説の高さをつぶすことによって見ることができます）が、下のマージンは無視しています。

アイデア？他のすべてのブラウザがここでうまくいきます...

出典

2011-05-19 Mark Kahn

（この例では、div）：

http://jsfiddle.net/HNZWK/5/

legend { 
    margin-bottom : 20px; 
} 

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

出典

2011-05-19 20:05:29

誰かがこの男に葉巻を与えます。 –

半修正のみで、最初の要素が浮いている場合はどうなりますか？ - > http://jsfiddle.net/HNZWK/55/ –

いいえ、それは私が持っていた問題のための完全な修正です、あなたはちょうど別の問題があります:)私はここに新しい質問を掲示することをお勧めします一歳。人々が出発点を持つようにこれを参照してください。 –

私はサファリで同じことを見ています。

おそらく、代わりにパディングを使用できます。それはうまくいくようです。

http://jsfiddle.net/HNZWK/3/

出典

2011-05-19 18:21:14 Sparky

私はボトムを持っているので、パディングを使用することはできませんborder :( –

@cwolves：これは、この状況でマージンをどのように解釈するのかをWebkitの問題と考えています。それ以外の方法は分かりません。 – Sparky

@cwolves：代わりに伝説？** ED IT：**これはうまくいかない... Webkitがここでも凡例を無視するように見える。 – Sparky

ブラウザの多くは、legend要素の問題を持っているようです。私の提案は、あなたが凡例要素に入れたテキストを取り、それをスパンで囲むことです。次に、すべてのスタイリングをそのスパンに適用します。

legendに従うことをまず最初に自動的に -webkit-margin-collapseと margin-topを使用することによって解決

出典

2011-05-19 19:47:02 Eric

答えて

関連する問題