Question

这是网站：

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

clearfix：

.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：

问题的根源可能在于你正试图将生成的内容添加到其他伪元素这一事实，这似乎在WebKit浏览器中也可以用于任何奇怪的原因。与上面替换元素中生成内容的问题不同，当前的Selectors 3规范和即将发布的Selectors 4规范都非常清楚：每个复杂选择器不应该有多个伪元素。当然，在实现伪元素时，WebKit臭名昭着地蔑视各种规则，所以事后看来，看到WebKit陷入困境并不会让我感到吃惊。

无论哪种方式，真正的结论是CSS生成内容的实现超出了当前CSS2.1 + Selectors标准的范围，我指的是为input等替换元素生成的内容和progress，以及在单个选择器中嵌套伪元素。

Answer 2

试试这个：

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

这是HTML5Boilerplate中使用的那个。我无法解释它与你的不同之处，但是这个代码已经被许多人评论过，并且它被用作主流。不太可能你会发现它失败了。

为什么我的clearfix无法在Firefox中运行？

2 个答案: