Question

如果我在CSS选择器中使用<address>元素，Firefox似乎拒绝设置html元素的样式。

示例：

<footer>
    <address>
        <ul>
            <li id="email_address">email@website.com</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
    </address>
</footer>

address li { color: #0000ff; } /* fails */
#phone_number { color: #ff0000; } /* works as expected */

我在FF 3.6.12上看到这个，在Safari 5.0.3中按预期工作

知道为什么会这样吗？

Answer 1

原因其实很简单。 Firefox 3.6尚未符合HTML5草案规范。使用Firebug检查<address>元素，我们可以看到 Firefox 看到的内容：

<footer>
    <address>
        </address><ul>
            <li id="email_address">email@website.com</li>
            <li id="phone_number">(555) 555 - 5555</li>
        </ul>
</footer>

正如您所看到的，Firefox已经以某种方式解释了您的HTML，如上所示。 <address>元素现在为空，因此<li>元素未设置样式。

但为什么呢？浏览HTML4 specifications，我们可以看到<address>元素~~是内嵌元素~~（如评论中Alohci所述））应该只包含内联元素。

<!ELEMENT ADDRESS - - (%inline;)* -- information on author -->
<!ATTLIST ADDRESS
  %attrs;                              -- %coreattrs, %i18n, %events --
  >

由于Firefox 3.6不符合HTML5规范，至少对Firefox来说，上面使用的HTML 不有效，浏览器处理未指定行为的方式是它们中断，如图所示以上。

没有办法解决这个问题 - HTML5仅在起草阶段，并且浏览器不需要以任何方式符合它们。您可能希望向Mozilla的Bugzilla bug tracking system提交错误报告。

Answer 2

看起来不允许在Firefox中将任何块元素包含到<address>中，<address><span></span></address>运行良好，也许Firefox默认定义<address>内联元素。您可以将<div class="address">打包到<address>，即使它很难看。

Answer 3

如果你只是为地址定位一个id，你就可以到处走走。但至于为什么会发生这种情况，如果你在Firebug中打开渲染的源代码，你会发现这是渲染的HTML：

<footer> <address> </address> <ul> <li id="email_address">email@website.com</li> <li id="phone_number">(555) 555 - 5555</li> </ul> </footer>

ul标记元素在地址标记之外呈现，因此css失败。

如果CSS选择器包含地址元素，Firefox拒绝设置样式元素

3 个答案: