Question

我尽可能接近真正的SSCCE，同时还在复制这个问题：

<!DOCTYPE html>
<html class="colored-bg">
<head>
  <title>Firefox CSS Priority Test</title>
  <link rel="stylesheet" id="_switchSheetBackup" href="//Shared.BHStudios.org/_css/visual_Clean_Blue.css"/>
  <link rel="stylesheet" id="_switchSheet"       href="//Shared.BHStudios.org/_css/visual_Clean_Purple.php"/>
</head>

<body>
  This page should have a purple background, not a blue one.
  <br/>
  <a href="#" class="inverse button">This should have purple text.</a>
</body>
</html>

^{Live Example}

正如你所看到的，第一个样式表是一个备份，以防第二个样式表没有加载或需要一段时间加载（这是我的方式，如果实现minimal-JS站点主题，所以当样式更改时，用户没有看到明显的闪烁）。如果所有样式表都正确加载，则预期结果是页面为紫色。

这适用于Chrome和Edge浏览器，但不适用于Firefox。奇怪的是，它只是背景着色;其他类如inverse button（使用带有彩色文本的白色按钮）按预期工作！ Firefox中是否有一个怪癖或不支持的功能导致此问题？最重要的是，如何解决此问题？

此外，I tried minimizing the code further但无法复制这种奇怪的行为。

Answer 1

visual_Clean_Purple.php第33行的规则打破了Firefox中的CSS。尝试删除：

*::selection,

BoltClock在this answer中提供了一个很好的解释：

Firefox似乎根本不理解:: selection（因此   需要供应商前缀:: - moz-selection），所以它忽略了   根据规范遇到无法识别的选择器的整个规则。

浏览器无法理解一个或多个 的常见解决方法   组中的 选择器用于拆分/复制规则集。

...

事实上，在这种情况下，这是你唯一可以做的事情，即你会做   不得不忍受这种轻微的膨胀。

Answer 2

您正在使用Firefox尚未支持的CSS选择器（*::selection）在visual_Clean_Purple.php中停止对css选择器进行解释。

我删除了该选择器，它可以正常运行：https://plnkr.co/edit/d0eXisEaAqwvmF4cZL5f?p=preview

为什么此页面在Chrome中为紫色，在Firefox中为蓝色？

2 个答案: