html – 如果CSS选择器包含地址元素,Firefox拒绝样式元素

如果我使用< address>>,Firefox似乎拒绝为 HTML元素设置样式元素在CSS选择器.

例：

<footer>
    <address>
        <ul>
            <li id="email_address">[e-mail]</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中预期的工作

任何想法为什么会发生这种情况？

解决方法

其原因其实很简单. Firefox 3.6还不符合HTML5草案规范.检查< address>元素与Firebug,我们可以看到Firefox看到的：

<footer>
    <address>
        </address><ul>
            <li id="email_address">[e-mail]</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提交错误报告.