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

Question

如果我<address>在CSS选择器中使用该元素,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草案规范.<address>使用Firebug 检查元素,我们可以看到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规范,我们可以看到该<address>元素是一个内联元素(如评论中Alohci所述)应该只包含内联元素.

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

由于火狐3.6不符合HTML5规范,火狐至少,你上面使用的HTML是不是有效的,并且浏览器处理未指定的行为方式是他们打破,如上图所示.

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