Geek asks and answers

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

Why does Firefox 4 absolutely position field-style legends differently than other browsers?

Testing 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>

Note 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 border of the field.

In Firefox 4.0.1, I need to change the topand properties leftto get a similar effect. For example, in a styletest page tag, uncomment this CSS:

                /* Firefox */
                /*top: -20px;
                left: -25px;*/
+3
source share
1 answer

legendElements are unusual and strange. However, if all other browsers do the same, Firefox should do the same.

, : https://bugzilla.mozilla.org/show_bug.cgi?id=450418

, div fieldset padding .

: http://jsbin.com/ivedo4

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

( , ), , .

IE8, .

+7

More articles:


All Articles