Why does Firefox 4 absolutely position fieldset le

2019-05-10 01:30发布

站内文章 / HTML/CSS
42 0 0

问题:

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;*/

回答1:

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.



标签： css firefox css-position firefox4 legend
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~