Why does Firefox 4 absolutely position fieldset legends differently than other browsers?

Test page:

<!DOCTYPE html>
<html dir="ltr" lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
        <style type="text/css">
            *
            {
                margin: 0;
                padding: 0;
            }

            body
            {
                font-family: Tahoma, Arial, sans-serif;
                font-size: 62.5%;
            }

            #wrapper
            {
                margin: auto;
                padding: 1em;
                width: 720px;
            }

            form
            {
                width: 670px;
                padding: 25px;

                background-color: #ffffff; /* White */
                color: #000000; /* Black */

                border: 1px solid #cccccc; /* Gray */

                font-size: 12px;
            }

            fieldset
            {
                position: relative;
                border: 1px solid #cccccc; /* Gray */
                padding: 25px 10px 5px 15px;
                margin-bottom: 20px;
            }

            fieldset legend
            {
                position: absolute;
                top: 5px;
                left: -10px;

                /* Firefox */
                /*top: -20px;
                left: -25px;*/

                font-weight: 900;

                background-color: #ffffff; /* White */
            }

            /* Input Types */

            label
            {
                margin-right: 10px;
                line-height: 20px;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <form method="POST" action="test" id="testForm">
                <fieldset>
                    <legend>Test</legend>
                    <label for="test">Test:</label><input type="text" id="test" name="test" value=""/>
                </fieldset>

                <input type="submit" value="Test"/>
            </form>
        </div>
    </body>
</html>

Notice that in Opera 11.10 Build 2092, Chrome 11.0.696.65, Safari 5.0.4 (7533.20.27), and Windows Internet Explorer 9, they display the legend on the left, overlapping the fieldset border.

In Firefox 4.0.1, I have to change the top and left properties to get a similar effect. For example, within the style tag of the test page, uncomment this CSS:

                /* Firefox */
                /*top: -20px;
                left: -25px;*/

legend elements are quirky and weird. That being said, if all the other browsers do the same thing, then Firefox should do the same thing.

There's already a bug report here describing the issue in detail: https://bugzilla.mozilla.org/show_bug.cgi?id=450418

A workaround is to add a wrapper div inside the fieldset and move the padding to that.

Your unchanged code: http://jsbin.com/ivedo4

Fixed code: http://jsbin.com/ivedo4/2

I tested it with the same browsers (not identical versions, but close) you listed in your question, and the rendering was consistent.

My code doesn't look quite right in IE8, but yours is broken in exactly the same way.

来源：https://stackoverflow.com/questions/5937508/why-does-firefox-4-absolutely-position-fieldset-legends-differently-than-other-b

标签

css

firefox

css-position

firefox4

legend