Question

我注意到我导航的div不会在Safari中显示，而是出现在其他所有浏览器中。它适用于Chrome，Firefox和Opera。我已经尝试使用@media屏幕和（-webkit-min-device-pixel-ratio：0）和！重要但这些似乎不起作用。我的网站是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中生效，而不是仅在小屏幕。

干杯！：）

Div没有出现在Safari中

2 个答案: