gpt4 book ai didi

html - 为什么这个页面在 Chrome 中是紫色的,而在 Firefox 中是蓝色的?

转载 作者:搜寻专家 更新时间:2023-10-31 22:40:35 26 4
gpt4 key购买 nike

我尽可能接近真正的 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

如您所见,第一个样式表是一个备份,以防第二个样式表未加载或需要一段时间才能加载(如果实现最小 JS 网站主题,这是我的方式,因此当样式更改时,用户看不到明显的闪烁)。预期的结果是,如果所有样式表都正确加载,则页面为紫色。

这在 Chrome 和 Edge 浏览器中效果很好,但在 Firefox 中效果不佳。奇怪的是,它只是背景色;其他类,如 inverse button(它使带有彩色文本的白色按钮)按预期工作! Firefox 中是否存在导致此问题的怪癖或不受支持的功能?最重要的是,我该如何解决这个问题?


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

最佳答案

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

*::selection,

BoltClock 在 this answer 中提供了很好的解释:

Firefox appears to simply not understand ::selection (hence necessitating the vendor-prefixed ::-moz-selection), so it ignores the entire rule on encountering an unrecognized selector per the spec.

The common workaround for a browser not understanding one or more selectors in a group is to split/duplicate the rule set.

...

In fact, in this case it's the only thing you can do, i.e. you will have to put up with this slight bit of bloat.

关于html - 为什么这个页面在 Chrome 中是紫色的,而在 Firefox 中是蓝色的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37935145/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com