Блог

Главная - Вопросы по программированию - Почему Firefox 4 абсолютно позиционирует легенды наборов полей иначе, чем другие браузеры?

Почему Firefox 4 абсолютно позиционирует легенды наборов полей иначе, чем другие браузеры?

#css #firefox #css-position #firefox4 #legend

#css #firefox #css-position #firefox4 #легенда

Вопрос:

Почему 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 сборки 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;*/

Комментарии:

1. Я уверен, вы заметили, что в Firefox 4 много трудностей и странностей. Я вернулся к версии 3.6.17; Я подожду несколько недель, пока не установится версия 4.

2. @Pete FF4 был выпущен (не бета-версия) 22 марта. В тесте Acid3 он набрал 97/100 баллов (точно такой же результат, как у Chrome 11). Что заставляет вас думать, что что-то изменится через «несколько недель»?

Ответ №1:

legend элементы причудливые и странные. При этом, если все другие браузеры делают то же самое, то Firefox должен делать то же самое.

Здесь уже есть отчет об ошибке, подробно описывающий проблему: https://bugzilla.mozilla.org/show_bug.cgi?id=450418

Обходной путь — добавить оболочку div внутри fieldset и переместить padding туда.

Ваш неизмененный код: http://jsbin.com/ivedo4

Исправленный код: http://jsbin.com/ivedo4/2

Я тестировал это с теми же браузерами (не идентичными версиями, но близкими), которые вы указали в своем вопросе, и рендеринг был согласованным.

Мой код выглядит не совсем правильно в IE8, но ваш сломан точно так же.