火狐浏览器 3.5 和3.6：无法设置<地址>样式；如果它包含
;

发布于 2024-12-10 09:38:19 字数 733 浏览 7 评论 0原文

以下网页将在 Firefox 3.5 中呈现并出现意外结果。第一个

元素不会有粉红色背景，但第二个会有。这种事只发生在我身上吗？我的代码不正确吗？或者这是一个错误？

编辑：这也会发生在 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>

原文

The following web page will render with unexpected result in Firefox 3.5. The first <address> element will not have a pink background, but the second will. Is this only happening for me? Is my code incorrect? Or is it a bug?

Edit: This also happens in 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

霊感 2024-12-17 09:38:19

无论是在您的 html 还是浏览器中，这都不是真正的错误。更重要的是，您正在使用 HTML5，而 Firefox 3.x 还没有充分了解 HTML5。

在 HTML 4.01 中，Address 元素定义为：

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

所以它只允许内联内容。

内。

在 HTML5 之前，错误处理行为尚未标准化，其他浏览器选择不同的错误处理行为，允许

内部。

当 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.

在此

内有效，因此HTML5解析规则被定义为：

元素内。

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

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

It's not really a bug, either in your html or the browser. It's more that you're using HTML5 and Firefox 3.x wasn't sufficiently HTML5 aware.

In HTML 4.01, the Address element was defined as:

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

so it only allowed inline content. <ul> isn't inline content, so Firefox 3.x, in its broken markup handling rules decided that it wouldn't allow the <ul> to be inside the <address>.

Before HTML5, error handling behaviour wasn't standardized, and other browsers chose different error handling behaviour which allowed the <ul> to be inside the <address>.

When HTML5 came along, it changed the validity rules, so in that, the address element is defined as:

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.

In this <ul> is valid within <address>, so the HTML5 parsing rules were defined such that <ul> will be placed inside an <address> element by the parser.

Firefox 4 and later uses an HTML5 parser, so your problem doesn't arise there.

And the moral of the story is, don't expect old browsers to support your modern markup.

回复收藏 0 原文

身边 2024-12-17 09:38:19

我已经尝试过了，你是对的。在此实例中，FF3.x 中的

background

经过一番尝试后，它似乎特定于

。如果我将其更改为

（并更改样式以匹配当然），那么它就可以工作。请参阅 http://jsfiddle.net/kPUpN/2/

更奇怪的是，如果我将其更改为

那么它就不起作用...除非我添加以下 CSS：

ul:background:inherit;

不幸的是，虽然这个技巧确实适用于

，但它仍然不起作用不与<地址>。

即使使用 address ul {background:pink;} 也无法使其工作。这可真是个顽固的家伙啊。

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

这似乎确实是此标签组合和此浏览器版本的特定问题，因此您应该有足够的空间来解决它。如果涉及到这一点，

元素无论如何都是相当晦涩的，因此没有人会因为使用

而惩罚您反而。

I've tried it, and you're right. It would appear that the background style is not inherited by the <ul> element in FF3.x in this instance.

Having experimented a bit, it seems to be specific to the <address>. If I change it to a <div> (and change the styling to match of course), then it works. See http://jsfiddle.net/kPUpN/2/

More peculiarly, if I change it to a <nav> then it doesn't work... unless I add the following CSS:

ul:background:inherit;

Unfortunately, while this trick does work with <nav>, it still doesn't work with <address>.

Even using address ul {background:pink;} didn't make it work. It's quite a stubborn one this one.

So it does seem that you've hit upon a bug with the browser. It's worth pointing out of course that Firefox 3.6 is several versions old now and that the current version does not apparently have this bug, so one assumes that the Mozilla people know about it and have fixed it, which is good... but doesn't really help you if you need it to work in FF3.6. I doubt they'll fix it in this old version now.

It does seem to be a specific issue with this tag combination and this browser version, so there should be plenty of scope for you to work around it. If it comes to it, the <address> element is fairly obscure anyway, so no-one will penalise you for using <div class='address'> instead.

回复收藏 0 原文