html - 为什么我的 clearfix 在 Firefox 中不起作用？

Question

这是网站:

http://m2c.dreamhosters.com/wordpress/

清除修复:

.clearfix:after,
.sub-menu:after,
.sub-menu:after li {
    content: "";
    display: table;
    clear: both;
}

在 Chrome 中运行完全正常。但在 Firefox 中，它甚至不会出现在元素检查器中(并使父 div 缩小。

我该如何解决这个问题？

Answer 1

如评论中所述，Firefox 正在放弃该规则，因为您的选择器中的 .sub-menu:after li 无效。在 CSS2.1和 Selectors 3 ，每个复杂选择器最多只能出现一个伪元素，并且它必须位于选择器的最后。当浏览器在规则集中遇到无效选择器时 must drop the entire ruleset .这就是它没有出现在检查器中的原因。

要修复它，请删除有问题的选择器，因为它看起来是一个错误:

.clearfix:after,
.sub-menu:after {
    content: "";
    display: table;
    clear: both;
}

或者，如果您打算将 :after 伪元素应用于 .sub-menu li，请像这样重新定位伪元素:

.clearfix:after,
.sub-menu:after,
.sub-menu li:after {
    content: "";
    display: table;
    clear: both;
}

所以，与其问为什么这个 CSS 在 Firefox 上不起作用，真正的问题是:为什么 Chrome 接受它？这很可能是因为 WebKit(以及扩展 Blink)在解析伪元素时被认为更加宽松，这可能是因为它使用了某些需要主动违反规范的非标准功能。引用this other answer of mine :

Perhaps the root of the problem lies in the very fact that you're trying to add generated content to other pseudo-elements, which again seems to work in WebKit browsers for whatever bizarre reason. Unlike the above issue with generated content within replaced elements, the current Selectors 3 spec and the upcoming Selectors 4 spec are both very clear on this: you are not supposed to have more than one pseudo-element per complex selector. Of course, WebKit has infamously flouted various rules when it comes to implementing pseudo-elements, so in hindsight it does not surprise me to see WebKit mess up doing so.

Either way, the real conclusion is that the implementation of CSS generated content is extremely poor beyond the scope of the current standard of CSS2.1 + Selectors, by which I mean generated content for replaced elements such as input and progress, and nesting of pseudo-elements in a single selector.