Firefox 3.5和3.6：无法使用样式 <address> 如果它包含一个 <ul>
[英]Firefox 3.5 & 3.6: Unable to style <address> if it contains an <ul>
问题描述
The following web page will render with unexpected result in Firefox 3.5. 
以下网页将在Firefox 3.5中以意外结果呈现。 The first <address> element will not have a pink background, but the second will. 第一个<address>元素将不具有粉红色背景，但第二个将是。 Is this only happening for me? 这只发生在我身上吗？ Is my code incorrect? 我的代码不正确吗？ Or is it a bug? 或者这是一个错误？
Edit: This also happens in Firefox 3.6 编辑：这也发生在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 个解决方案
解决方案1
9 已采纳 2011-10-16 00:04:08
It's not really a bug, either in your html or the browser. 在你的HTML或浏览器中，这不是一个真正的错误。 It's more that you're using HTML5 and Firefox 3.x wasn't sufficiently HTML5 aware. 更多的是你正在使用HTML5和Firefox 3.x没有足够的HTML5识别。
In HTML 4.01, the Address element was defined as: 在HTML 4.01中，Address元素定义为：
<!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> . <ul>不是内联内容，因此Firefox 3.x在其破坏的标记处理规则中决定不允许<ul>位于<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> . 在HTML5之前，错误处理行为没有标准化，其他浏览器选择了不同的错误处理行为，允许<ul>在<address> 。
When HTML5 came along, it changed the validity rules, so in that, the address element is defined as: 当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.
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. 在此<ul>在<address>有效，因此定义了HTML5解析规则，以便解析器将<ul>放在<address>元素内。
Firefox 4 and later uses an HTML5 parser, so your problem doesn't arise there. Firefox 4及更高版本使用HTML5解析器，因此不会出现问题。
And the moral of the story is, don't expect old browsers to support your modern markup. 故事的寓意是，不要指望旧的浏览器支持你的现代标记。
解决方案2
1 2011-10-15 19:39:36
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. 在这个实例中，似乎FF3.x中的<ul>元素不会继承background样式。
Having experimented a bit, it seems to be specific to the <address> . 经过一些实验，它似乎特定于<address> 。 If I change it to a <div> (and change the styling to match of course), then it works. 如果我将其更改为<div> （并改变样式以匹配当然），那么它可以工作。 See http://jsfiddle.net/kPUpN/2/ 见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: 更奇特的是，如果我将其更改为<nav>然后它不起作用...除非我添加以下CSS：
ul:background:inherit;
Unfortunately, while this trick does work with <nav> , it still doesn't work with <address> . 不幸的是，虽然这个技巧适用于<nav> ，但它仍然无法与<address> 。
Even using address ul {background:pink;} didn't make it work. 即使使用address ul {background:pink;}也没有使它工作。 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. 值得指出的是，Firefox 3.6现在有几个版本，当前版本显然没有这个bug，所以假设Mozilla人知道它并修复它，这很好......但是没有如果你需要它在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. 如果它涉及到它， <address>元素无论如何都是相当模糊的，所以没有人会因为使用<div class='address'>而惩罚你。
解决方案3
0 2011-10-16 00:12:25
当我测试FireFox时，html解析器没有将UL标记放在address标记内，所以我认为最好明确地为ul设置背景！
解决方案4
-1 2011-10-15 18:03:54
尝试：
background-color: pink;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.