6

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

4 回答 4

9

这不是真正的错误,无论是在您的 html 还是浏览器中。更多的是您使用的是 HTML5,而 Firefox 3.x 对 HTML5 的认识不够。

HTML 4.01 中,Address 元素被定义为:

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

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

<ul>在HTML5 之前,错误处理行为没有标准化,其他浏览器选择了不同的错误处理行为,允许<address>.

当 HTML5 出现时,它改变了有效性规则,因此,地址元素定义为:

4.4.10 地址元素
  内容模型:
    流式内容,但没有标题内容后代,没有分段
    内容后代,并且没有页眉、页脚或地址元素后代。

In this <ul>is valid within <address>,因此定义了 HTML5 解析规则,以便解析器<ul>将其放置在<address>元素内。

Firefox 4 及更高版本使用 HTML5 解析器,因此您的问题不会出现在那里。

这个故事的寓意是,不要指望旧浏览器支持您的现代标记。

于 2011-10-16T00:04:08.623 回答
1

我试过了,你是对的。在这种情况下,FF3.x 中的元素似乎background没有继承该样式。<ul>

经过一番实验,它似乎是特定于<address>. 如果我将其更改为 a <div>(并更改样式以匹配当然),那么它可以工作。见http://jsfiddle.net/kPUpN/2/

更特别的是,如果我将其更改为 a<nav>则它不起作用......除非我添加以下 CSS:

ul:background:inherit;

不幸的是,虽然这个技巧适用于<nav>,但它仍然不适用于<address>

即使使用address ul {background:pink;}也没有用。这个是蛮顽固的。

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

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

于 2011-10-15T19:39:36.900 回答
0

由于我测试了 FireFox html 解析器并没有将UL标签放在标签内address,所以我认为最好ul明确设置背景!

于 2011-10-16T00:12:25.377 回答
-1

尝试:

background-color: pink;

于 2011-10-15T18:03:54.753 回答