Question

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

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

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

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

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

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

Answer 2

有一种非常有效的解决方法：

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

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

CSS显示：无；在Firefox中无法使用。我该如何解决？

2 个答案: