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

Question

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

示例:

<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 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 提交错误报告。 .