显示：无；不工作但可见性：隐藏； [关闭]答案

【问题标题】：display:none; not working but visibility:hidden; does [closed]显示：无；不工作但可见性：隐藏； [关闭]
【发布时间】：2019-12-30 09:31:38
【问题描述】：

当屏幕有一定宽度时，我试图隐藏我的菜单，但由于某种原因 display:none 不起作用，但 visibility:hidden 起作用。
我在教程中使用了该人的确切代码（取自他上传的css 文件），它适用于他，但不适用于我？
我了解两者之间的区别，但我不明白为什么要隐藏该元素，但另一个由于某种原因没有。
这是css 代码：

  .site-header__menu-trigger {
    color: #FFF;
    cursor: pointer;
    font-size: 1.2rem;
    position: absolute;
    z-index: 10;
    top: 7px;
    right: 46px;
  }

  @media (min-width: 530px) {

    .site-header__menu-trigger {
      top: 5px;
      font-size: 1.4rem;
    }
  }

  @media (min-width: 960px) {

    .site-header__menu-trigger {
      display: none;
    }
  }

更新：对不起，这是我的 HTML

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>

<body>
<header class="site-header">
    <div class="container">
      <h1 class="school-logo-text float-left"><a href="<?php echo site_url() ?>"><strong>Fictional</strong> University</a></h1>
      <span class="js-search-trigger site-header__search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
      <i class="site-header__menu-trigger fa fa-bars" aria-hidden="true"></i> 
      <div class="site-header__menu group">
        <nav class="main-navigation">
          <ul>
            <li><a href="<?php echo site_url('/about-us') ?>">About Us</a></li>
            <li><a href="<?php echo site_url('/programs') ?>">Programs</a></li>
            <li><a href="<?php echo site_url('/events') ?>">Events</a></li>
            <li><a href="<?php echo site_url('/campuses') ?>">Campuses</a></li>
            <li><a href="<?php echo site_url('/blog') ?>">Blog</a></li>
          </ul>
        </nav>
        <div class="site-header__util">
          <a href="#" class="btn btn--small btn--orange float-left push-right">Login</a>
          <a href="#" class="btn btn--small  btn--dark-orange float-left">Sign Up</a>
          <span class="search-trigger js-search-trigger"><i class="fa fa-search" aria-hidden="true"></i></span>
        </div>
      </div>
    </div>
  </header>
</body>
</html>

更新 2：更改我的 wp_enqueue_style() 函数的顺序解决了问题，我必须先加载引导 css，然后加载我自己的 css 文件，如下所示：

wp_enqueue_style('fontAwesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
wp_enqueue_style('university_main_styles', get_stylesheet_uri(), NULL, microtime());

现在它甚至可以在没有 !important 显示的情况下工作。

【问题讨论】：

你能提供一个可行的例子吗？在代码 sn-p（此处为 stackoverflow）或一些在线 Sandox（例如 jsfiddle）中
请出示您的 html
向我们展示您的完整代码，如果您不提供完整代码，我们将无法帮助您。
你使用像 bootstrap 这样的库吗？可能库 css 对元素的“显示”属性应用了一个 !important 规则。这可以解释为什么可见性有效。
试试display: none!important;

标签： css visibility display

【解决方案1】：

display: none; 不起作用的唯一原因是，如果它被具有更高优先级的其他 CSS 覆盖。

检查您是否使用了诸如 Bootstrap 或 TailwindCSS 之类的 CSS 库，这可能会覆盖您的 display: none; 规则。

如果您需要保留使用这些库，可以尝试使用 !important 属性，如下所示：display: none !important;

编辑：

在查看了您的 HTML 之后，我最初的假设被证明是正确的。 Font Awesome 类 fa 有一个内联属性 display: inline-block;，它会覆盖您的 display 属性。

【讨论】：

这很好，谢谢！我在菜单中使用了很棒的字体，这会导致这个问题吗？
@Rugo 是的，这就是原因。请看看我的编辑。
哇，这个答案已经 +8 ...

【解决方案2】：

你可以试试这个！

.site-header__menu-trigger {
      display: none !important;
    }

【讨论】：

【解决方案3】：

您的代码对我有用，问题可能是您没有他用于图标的库（FONTAWESOME），请尝试在<i class="site-header__menu-trigger fa fa-bars" aria-hidden="true">Hello</i> 中写入您看到了吗？如果你看到你好，这意味着你需要导入 fontawesome，去这里https://fontawesome.com/start 看看怎么做

【讨论】：