Div 没有出现在 Safari 中

Question

我注意到我用于导航的 div 没有显示在 Safari 中，而是显示在所有其他浏览器中。它适用于 Chrome、Firefox 和 Opera。我试过使用 @media screen 和 (-webkit-min-device-pixel-ratio:0) 和 !important 但这些似乎不起作用。我的网站是http://www.sanforddesigns.com。有什么帮助，那就太好了！

<div class="fixed"> 
    <div class="nav_container">
        <a id="logoBtn"><img src="_images/logo.png" height="86" width="86" class="logo" alt="logo"></a>
        <ul class="nav">
          <li><a id="webdesign1Btn" href="#webdesign_one">Web Design</a></li>
          <li><a id="photoBtn" href="#photography">Photography</a></li>
          <li><a id="resumeBtn" href="#resume">Resume</a></li>
          <li><a id="aboutBtn" href="#aboutMe">About</a></li>
          <li><a id="contactBtn" href="#contactMe">Contact</a></li>
        </ul>
    </div>
</div>

.nav_container {
margin-top:0px;
background: #f2f2f2;
width: 100%;
height: 100px;
top: 0;
left: 0;
width: 100%;
z-index: 1000;  
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);

}

Answer 1

在第 1547 行的媒体查询中的display: none 出于某种原因即使在大屏幕上也会出现。也许验证您的 CSS，或者尝试在 screen 之后添加 and。

@media only screen and (max-width: 480px) {

}

Answer 2

您的媒体查询语法无效。您在style.css 的第 1539 行有一个媒体查询，如下所示：

@media only screen (max-width: 480px) {

所以您在screen 和(max-width[..] 之间缺少一个and。所以应该是：

@media only screen and (max-width: 480px) {

某些浏览器（如 Chrome）会适应这些错误，但 Safari 会更严格一些，因此媒体查询内部的 .nav_container { display: none } 将在所有版本的 Safari 中生效，而不仅仅是在小屏幕上。

干杯！ :)