Firefox отказывается от элемента стиля, если селектор CSS содержит элемент адреса

Firefox, похоже, отказывается стилизовать элемент html, если я использую элемент <address> в селекторе CSS.

Пример:

<footer>
    <address>
        <ul>
            <li id="email_address">[email protected]</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
    </address>
</footer>

address li { color: #0000ff; } /* fails */
#phone_number { color: #ff0000; } /* works as expected */

Я вижу это на FF 3.6.12, работает как ожидается в Safari 5.0.3

Любая идея, почему это происходит?

Ответы

Ответ 1

Причина этого на самом деле довольно проста. Firefox 3.6 еще не соответствует черновым спецификациям HTML5. Осмотрев элемент <address> с помощью Firebug, мы увидим, что видит Firefox:

<footer>
    <address>
        </address><ul>
            <li id="email_address">[email protected]</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
</footer>

Как вы можете видеть, Firefox каким-то образом интерпретировал ваш HTML, как показано выше. Элемент <address> теперь пуст, и поэтому элементы <li> не имеют стиля.

Но почему? Просматривая спецификации HTML4, мы можем видеть, что элемент <address> является встроенным элементом (как указано в Alohci в комментариях) должны содержать только встроенные элементы.

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

Так как Firefox 3.6 не соответствует спецификациям HTML5, по крайней мере Firefox, HTML, который вы использовали выше, недействителен, и способ, которым браузеры имеют дело с неопределенным поведением, заключается в том, что они ломаются, как показано выше.

Невозможно исправить это - HTML5 находится только на этапах разработки, и браузеры не обязаны им каким-либо образом соответствовать. Вы можете отправить отчет об ошибке в Mozilla система отслеживания ошибок Bugzilla.

Ответ 2

Похоже, что не разрешено содержать какой-либо блок-элемент в <address> в Firefox, <address><span></span></address> работает хорошо, возможно, Firefox определяет <address> встроенный элемент по умолчанию. Вы можете обернуть <div class="address"> в <address>, хотя это уродливо.

Ответ 3

Вы можете обойтись, если вы просто нацеливаете идентификатор на адрес. Но почему это происходит, если вы откроете предоставленный источник в Firebug, вы заметите, что это отображенный HTML:

<footer> <address> </address> <ul> <li id="email_address">[email protected]</li> <li id="phone_number">(555) 555 - 5555</li> </ul> </footer>

Элементы тега ul выводятся за пределы тега адреса, поэтому css не работает.