padding a fieldset, trouble with IE_问答_开发者

开发者 https://www.devze.com 2023-02-24 04:57 出处：网络

What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:

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

And this is the css

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    f开发者_Go百科ieldset div {
        border: 1px dotted silver;
    }

Can also be seen here: http://jsfiddle.net/nRAGM/6/

So my question is: how to get the above html to display as intended in IE?

The following code is cross-browser compatible.

You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).

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;
}

Adding display:block to fieldset styling should solve your problem. It worked for me! Try out.

or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.

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;
}

margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both

PS: I think this works for IE6 too