Question

我在一个正在开发的本地项目中发现了一个不愉快的惊喜，两个星期前，我正确地可视化了所有内容，但是现在在Chrome和Safari上，导航栏的高度被忽略了，而在Firefox上，它可以正常运行并在Codepen。该网站基于Wordpress + Bootstrap 4

firefox vs chrome

HTML：

    <nav id="top-navbar" class="navbar sticky-top navbar-expand-lg navbar-dark animate">
    <div class="container">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div id="bs4navbar" class="collapse navbar-collapse mx-auto">
        <ul id="menu-left" class="navbar-nav ml-auto"><li id="menu-item-27" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-27 nav-item"><a href="http://www.hebi.local/" class="nav-link">Home</a></li>
<li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-23 current_page_item menu-item-28 nav-item active"><a href="http://hebi.local/about/" class="nav-link active">About</a></li>
<li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-29 nav-item dropdown"><a href="http://hebi.local/gallery/" class="nav-link dropdown-toggle" data-toggle="dropdown">Gallery</a>
<div class="dropdown-menu">
<a href="http://hebi.local/gallery/bespoke/" class=" dropdown-item">Bespoke</a><a href="http://hebi.local/gallery-type/collections/" class=" dropdown-item">Collections</a></div>
</li>
</ul>
        <a class="navbar-brand logo animate d-none d-sm-block" href="http://hebi.local">
                      <img class="animate" src="https://www.hsdtaxlaw.com/wp-content/uploads/2016/05/logo_placeholder.png" alt="Logo">
                  </a>
        <ul id="menu-right" class="navbar-nav mr-0"><li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35 nav-item"><a href="http://hebi.local/contact/" class="nav-link">Contact</a></li>
</ul>
        <div class="external mr-auto">
          <a href="https://www.etsy.com/shop/HebiCorsetry" class="btn btn-primary shop-btn">Shop</a>
          <a href="https://www.facebook.com/HebiCorsets/" class="btn"><i class="fab fa-facebook-f"></i></a>
          <a href="http://i%20class=fab%20fa-instagram/i" class="btn"><i class="fab fa-instagram"></i></a>
        </div>
      </div>
    </div>
  </nav>

和自定义CSS：

.navbar {
      margin:0;
      border:none;
      border-radius:0;
      background-image: none;
      text-transform: uppercase;
      background: #000;
      font-family: 'Cinzel', serif;
    }

    .logo a {
      display: block;
      position: relative;
      max-height: 100px;
    }
    .logo img{
      max-width: 200px;
      max-height: 100px;
      padding: .5rem;
      -webkit-transition: all ease .2s;
      transition: all ease .2s;
    }

    .navbar a {
      color: #cc0000;
    }

    .navbar .btn-primary {
      background: #CC0000;
      border: solid #CC0000;
      color: #FFF;
    }
    .navbar .btn-primary:hover {
      background: #F81717;
      border: solid #F81717;
      color: #FFF;
        -webkit-transition: background-color .3s ease;
      transition: background-color .3s ease;
    }

    .navbar-nav ul{list-style-type: none}
    .navbar-nav li .dropdown-menu li a{line-height: 50px; height: 50px;}
    .spacer{height: 50px;}
    .no-margin{margin:0; padding:0;}

    .navbar li a {
      -webkit-transition: color ease .2s;
      transition: color ease .2s;
      display: inline-block;
      padding: 0 15px;
      font-weight: 400;
      letter-spacing: 2px;
      font-style: normal;
      text-transform: uppercase;
      }

Answer 1

在看完代码后，我发现您根本没有指定任何高度。唯一的高度规范在徽标img元素上，并且仅定义了max-height。这可能是导致问题的原因，因为导航栏的高度取决于该元素。为img设置固定的高度或最小高度将解决您的问题。

.logo img{
  max-width: 200px;
  min-height: 100px;
  max-height: 100px;
  padding: .5rem;
  -webkit-transition: all ease .2s;
  -moz-transition: all ease .2s;
  -ms-transition: all ease .2s;
  -o-transition: all ease .2s;
  transition: all ease .2s;
}

Answer 2

是否存在导航栏元素未设置高度的特定原因。设置高度确实可以为您提供帮助，并且可以使结果在浏览器中看起来更加一致。

Chrome和Safari忽略了导航栏高度

2 个答案: