Question

以下网页将在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>

Answer 1

在你的HTML或浏览器中，这不是一个真正的错误。更多的是你正在使用HTML5和Firefox 3.x不足以识别HTML5。

在HTML 4.01, the Address element中定义为：

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

所以它只允许内联内容。 <ul>不是内联内容，因此Firefox 3.x在其损坏的标记处理规则中决定不允许<ul>位于<address>内。

在HTML5之前，错误处理行为未标准化，其他浏览器选择了不同的错误处理行为，允许<ul>位于<address>内。

当HTML5出现时，它更改了有效性规则，因此，the address element定义为：

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解析器，因此不会出现问题。

故事的寓意是，不要指望旧的浏览器支持你的现代标记。

Answer 2

我已经尝试过了，你是对的。看起来background样式在此实例中不会被FF3.x中的<ul>元素继承。

进行了一些实验后，它似乎特定于<address>。如果我将其更改为<div>（并将样式更改为当然匹配），那么它可以正常工作。见http://jsfiddle.net/kPUpN/2/

更奇怪的是，如果我将其更改为<nav>，那么它不起作用......除非我添加以下CSS：

ul:background:inherit;

不幸的是，虽然这个技巧适用于<nav>，但它仍无法与<address>一起使用。

即使使用address ul {background:pink;}也无法正常运行。这个人很顽固。

所以你似乎已经遇到了浏览器的错误。值得指出的是，Firefox 3.6现在有几个版本，当前版本显然没有这个bug，所以假设Mozilla人知道它并修复它，这很好......但是没有如果你需要它在FF3.6中工作，真的可以帮助你。我怀疑他们现在会在这个旧版本中修复它。

这个标签组合和这个浏览器版本似乎确实存在特定问题，因此应该有足够的空间来解决它。如果涉及到它，<address>元素无论如何都是相当模糊的，所以没有人会因使用<div class='address'>而惩罚你。

Answer 3

当我测试FireFox时，html解析器没有将UL标记放在address标记内，所以我认为最好明确地为ul设置背景！

Answer 4

尝试：

background-color: pink;

Firefox 3.5＆amp; 3.6：如果<address>包含<ul> </ul> </address>，则无法设置样式<address>

4 个答案: