Css 为什么Firefox4对字段集图例的定位绝对不同于其他浏览器？_Css_Firefox_Css Position_Firefox4_Legend

Css 为什么Firefox4对字段集图例的定位绝对不同于其他浏览器？

css firefox

Css 为什么Firefox4对字段集图例的定位绝对不同于其他浏览器？,css,firefox,css-position,firefox4,legend,Css,Firefox,Css Position,Firefox4,Legend,为什么Firefox4对字段集图例的定位绝对不同于其他浏览器测试页面： <!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="utf-8"/> <title>Test</title> <style type="text/css"> *

为什么Firefox4对字段集图例的定位绝对不同于其他浏览器

测试页面：

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

legend

元素古怪而怪异。也就是说，如果所有其他浏览器都做同样的事情，那么Firefox也应该做同样的事情

这里已经有一个详细描述问题的bug报告：

解决方法是在

字段集

内添加一个包装

div

，并将

填充

移动到该位置

您未更改的代码：

固定代码：

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

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

我相信你已经注意到Firefox 4有很多困难和奇怪之处。我又回到了3.6.17；我会等几周，直到版本4稳定下来。@Pete FF4于3月22日发布（非测试版）。它在电脑上的分数为97/100（与Chrome 11的分数完全相同）。是什么让你认为“几周内”会有什么变化

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