CSS显示：无；不能在 Firefox 中工作。我怎样才能解决这个问题？答案

【问题标题】：CSS display: none; not working in Firefox. How can I fix this?CSS显示：无；不能在 Firefox 中工作。我怎样才能解决这个问题？
【发布时间】：2019-06-06 00:22:30
【问题描述】：

我有一个由其他人创建的网站，我的任务是接管。在这个网站上，导航中有一个三明治式菜单和一个搜索栏。

我已经创建了一个大型菜单（WordPress 插件）。现在旧图标是多余且无用的，因此我已将 display: none; 规则应用于 CSS 以将它们从前端删除。

这在 Mac 上的 Safari 和 Chrome 上正常工作，但似乎 Firefox 和 Chrome 上的 Windows 用户以及 Mac 上的 Firefox 用户仍然可以看到这些图标。

有人可以帮忙吗？该网站是www.quanser.com。您将在右侧标题中看到图标。

header.site-header .badge-links {
    display: none !important;
}

【问题讨论】：

添加这条新的 CSS 规则后，您是否清除了 Autooptimize 的缓存？
尝试清除浏览器缓存。
您发布的 css 看起来不错。可能是其他人提到的缓存问题或您在有条件加载的文件中拥有该CSS，因为我在FF中看不到它。
清除 Autoptimize 缓存似乎可以做到，因为我认为我不必每次都必须这样做，因为我想我应该养成这个习惯 :)
感谢大家的快速回复！谢谢@cabrerahector

标签： css wordpress cross-browser

【解决方案1】：

我在 Windows 上使用 Firefox，仍然可以看到搜索和汉堡菜单图标（我第一次访问您的网站），这意味着这与缓存无关。虽然通常使用 Wordpress，但您应该在更改一些 CSS 后清除缓存。

到目前为止，我已经检查了 CSS，发现这个 CSS 块重复了 3 次，最后一个块看起来像：

.header.site-header .badge-links {
   position: absolute;
   top: -3px;
   right: -.625rem;
}

尝试在你的 CSS 中找到这个块，然后添加如下内容：

.header.site-header .badge-links {
   position: absolute;
   top: -3px;
   right: -.625rem;
   display: none; 
}

You don't need to `!important` in your CSS in this case.

【讨论】：

【解决方案2】：

有一个非常有效的方法可以解决这个问题：

header.site-header .badge-links {
    z-index:-100;
}

@media screen and (max-width: 992px) {
header.site-header .badge-links {
    z-index:100;
}
@
}

【讨论】：