Firefox 3.5 и 3.6: невозможно стилизовать <адрес>, если он содержит <ul>

Следующая веб-страница будет отображаться с неожиданным результатом в Firefox 3.5. Первый <address> Элемент не будет иметь розового фона, но второй будет. Это происходит только для меня? Мой код неверен? Или это ошибка?

Изменить: это также происходит в Firefox 3.6

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Firefox 3.5 bug!</title>
    <style>
address
{
    background: pink;
}
    </style>
</head>
<body>

<address>
    <ul>
        <li>This will NOT have a pink background in Firefox 3.5</li>
    </ul>
</address>

<address>
    <p>But this will</p>
</address>

</body>
</html>
Источник

4 ответа

Решение

Это не совсем ошибка, как в вашем HTML или браузере. Более того, вы используете HTML5, а Firefox 3.x недостаточно осведомлен о HTML5.

В HTML 4.01 элемент Address был определен как:

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->

поэтому допускается только встроенный контент. <ul> не встроенный контент, поэтому Firefox 3.x в своих нарушенных правилах обработки разметки решил, что он не позволит <ul> быть внутри <address>,

До HTML5 поведение обработки ошибок не было стандартизировано, и другие браузеры выбирали другое поведение обработки ошибок, которое позволяло <ul> быть внутри <address>,

Когда появился HTML5, он изменил правила валидности, поэтому элемент address определяется как:

4.4.10 Элемент адреса
  Модель контента:
    Потоковое содержимое, но без потомков содержимого заголовка, без разделов 
    потомки содержимого, а не потомки заголовка, нижнего колонтитула или адреса.

В этом <ul> действует в течение <address>Таким образом, правила синтаксического анализа HTML5 были определены так, что <ul> будет размещен внутри <address> элемент парсером.

Firefox 4 и более поздние версии используют синтаксический анализатор HTML5, поэтому ваша проблема там не возникает.

И мораль этой истории в том, что старые браузеры не будут поддерживать вашу современную разметку.

Источник

Я попробовал, и ты прав. Казалось бы, что background стиль не наследуется <ul> элемент в FF3.x в этом случае.

Немного поэкспериментировав, похоже, что <address>, Если я изменю это на <div> (и измените стиль, чтобы соответствовать конечно), тогда это работает. Смотрите http://jsfiddle.net/kPUpN/2/

Более странно, если я поменяю его на <nav> тогда это не работает... если я не добавлю следующий CSS:

ul:background:inherit;

К сожалению, пока этот трюк работает <nav>, это все еще не работает с <address>,

Даже используя address ul {background:pink;} не заставил это работать. Это довольно упрямый.

Так что кажется, что вы столкнулись с ошибкой в ​​браузере. Конечно, стоит отметить, что Firefox 3.6 уже несколько версий и что в текущей версии, по-видимому, этой ошибки нет, поэтому предполагается, что люди Mozilla знают об этом и исправили это, что хорошо... но не Это действительно поможет вам, если вам это нужно для работы в FF3.6. Я сомневаюсь, что они исправят это в этой старой версии сейчас.

Похоже, что это специфическая проблема с этой комбинацией тегов и этой версией браузера, поэтому у вас должно быть достаточно возможностей для ее обхода. Если дело доходит до этого, <address> элемент в любом случае довольно неясен, поэтому никто не накажет вас за использование <div class='address'> вместо.

Источник

Как я тестировал FireFox, html-парсер не ставит UL тег внутри address тег, поэтому я думаю, что лучше установить фон для ul явно!

Источник

Пытаться:

background-color: pink;

Источник
Другие вопросы по тегам