4

フィールドセットのパディングのレンダリングで何が起こっているのか。FFとChromeでは期待どおりに動作しますが、IEでは失敗します。これは私が話しているコードです：

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

そしてこれはcssです

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

ここでも見ることができます：http： //jsfiddle.net/nRAGM/6/

だから私の質問は：上記のhtmlをIEで意図したとおりに表示する方法は？

4

3 に答える 3

7

次のコードはクロスブラウザー互換です。

フィールドセットの凡例のインデントを個別に制御できます。フィールドセットのパディングでは、凡例もインデントします。場合によってはこれが望ましい結果になることもありますが、次の方法の方が柔軟性が高くなります。また、内側の div にマージンを追加すると、レイアウトをより適切に制御できます (コンテナーにパディングを追加すると、不要な幅が追加される可能性があるため)。

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}
于 2011-04-12T09:06:55.003 に答える
2

display:blockフィールドセットのスタイリングに追加すると、問題が解決するはずです。それは私のために働いた！試してみる。

于 2012-08-05T12:55:11.457 に答える
1

または本当にいたずらなハック (または条件付き [lte IE 8] CSS に入れる) バージョン。

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

labelの一番上のパディングと同じようにの一番下を縁取りすることもfieldset、このトリックを行います。明らかに、他のブラウザは両方を取得するべきではありません

PS: これは IE6 でも機能すると思います

于 2011-04-12T09:05:24.900 に答える