Firefox 3.5 и 3.6: невозможно стиль <address>, если он содержит <ul> - PullRequest
Новая
       55

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

6 голосов
/ 15 октября 2011

Следующая веб-страница будет отображаться с неожиданным результатом в 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 ]

9 голосов
/ 16 октября 2011

На самом деле это не ошибка ни в вашем 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, он изменил правила действительности, так что элемент адреса определяется как: 

4.4.10 The address element
  Content model:
    Flow content, but with no heading content descendants, no sectioning 
    content descendants, and no header, footer, or address element descendants.

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

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

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

1 голос
/ 15 октября 2011

Я пробовал, и вы правы.Может показаться, что стиль 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'>.

0 голосов
/ 16 октября 2011

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

0 голосов
/ 15 октября 2011

Попробуйте:

background-color: pink;

...