Div 未显示在 Safari 中

Question

我注意到我的导航 div 没有显示在 Safari 中，但显示在其他所有浏览器中。它适用于 Chrome、Firefox 和 Opera。我尝试过使用

@media screen and (-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，或者尝试在

and

之后添加

screen

。

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

}

Answer 2

您的媒体查询语法无效。您在

style.css

的第1539行有一个媒体查询，如下：

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

所以你在

and

和

screen

之间缺少了

(max-width[..]

。所以应该是：

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

某些浏览器（例如 Chrome）会适应这些错误，但 Safari 更严格一些，因此媒体查询中的

.nav_container { display: none }

在 Safari 的所有版本中都有效，而不仅仅是在小屏幕上。

干杯！ :)