Chrome和Safari忽略了导航栏高度 _Safari

我在开发的一个本地项目中发现了一个不愉快的惊喜, 两个星期前, 我正确地可视化了所有内容, 但是现在在Chrome和Safari上, 导航栏的高度已被忽略, 而在Firefox上, 它可以正常运行, 也可以在Codepen上运行。该网站基于Wordpress + Bootstrap 4
火狐与铬
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="http://img.readke.com/220531/0609524I6-0.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; }

#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; }

#2【Chrome和Safari忽略了导航栏高度】是否有特定的原因为什么navbar元素没有设置高度。设置高度确实可以为你提供帮助, 并且可以使结果在浏览器之间看起来更加一致。