为什么 Firefox 4 绝对定位字段集图例与其他浏览器不同

为什么 Firefox 4 绝对与其他浏览器不同的字段集图例定位？

测试页：

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

请注意，在 Opera 11.10 Build 2092、Chrome 11.0.696.65、Safari 5.0.4 （7533.20.27）和 Windows Internet Explorer 9 中，它们在左侧显示图例，与字段集边框重叠。

在 Firefox 4.0.1 中，我必须更改 top 和 left 属性才能获得类似的效果。例如，在测试页的 style 标记中，取消注释此 CSS：

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

legend元素是古怪和奇怪的。话虽如此，如果所有其他浏览器都做同样的事情，那么 Firefox 应该做同样的事情。

这里已经有一个错误报告详细描述了这个问题：https://bugzilla.mozilla.org/show_bug.cgi?id=450418

解决方法是在fieldset内添加一个包装器div并将padding移动到该包装器。

您未更改的代码：http://jsbin.com/ivedo4

固定代码：http://jsbin.com/ivedo4/2

我使用您在问题中列出的相同浏览器（不是相同的版本，但很接近）对其进行了测试，并且渲染是一致的。

我的代码在IE8中看起来不太正确，但是您的代码以完全相同的方式被破坏。

相关内容

最新更新

热门标签：