html - 如何修复 Safari 和 Chrome 中响应代码的视觉差异

Question

我目前正在学习响应式编码，但我似乎遇到了一个我无法解决的小问题。我正在使用 Bootstrap 框架。

在网站上工作时，我意识到在 Safari 上查看时存在一些差异。 Chrome 看起来和我预期的一样，但在 Safari 上标题发生了变化。导航所在的水平橙色条向上移动，短的垂直橙色条跳到屏幕中间。然而，这只发生在大尺寸的情况下。所有其他窗口大小看起来都不错。

我尝试调整大型媒体查询的边距和填充，但这也会影响它在 chrome 中，从而抵消它。我应该如何在不影响其他浏览器的情况下解决这个问题？

网址是www.jennytaingdesign.com

如果需要文件，可以在https://www.dropbox.com/s/7a74id4f9k141m6/jennytaing_responsive.zip?dl=0下载。

任何建议或答案将不胜感激。谢谢!

Answer 1

您的网站有一些问题:

• 页眉宽度应该是可变的，不要提供固定宽度。

• 您不必为桌面和移动设备使用两个 Logo 。相反，您可以使用一个 Logo 并根据需要调整 img 宽度

• 标题应包含以下内容: Logo 、导航栏和橙色线条。在您的情况下，它仅包含 Logo 。
• 您可以使用具有特定高度的 div 和 :before 伪元素来创建所需的橙色线条效果。
• 您不必在每个断点处为 ul 菜单提供边距，您可以在主 CSS 文件中提供它，它将应用于整个元素。

我在页眉上做了一些工作，现在它就像注释 #3。这是更新代码:

<header>
    <a href="index.html" class="logo"><img src="img/header/logo.png" alt="logo" class="hidden-xs" id='logoDesktop'></a>     
    <nav>
    <ul>
        <li><a href="index.html" id="homeIcon"><span>HOME</span></a></li>
        <li><a href="portfolio.html" id="portfolioIcon">PORTFOLIO</a></li>
        <li><a href="contact.html" id="contactIcon">CONTACT</a></li>
    </ul>
    </nav>

   <div class="test"></div>
</header>

CSS:

header {
    position: relative;
}

header .test {
    background: #ED6643;
    width: 100%;
    height: 5px;
    display: inline-block;
}

header .test:before {
    content: "";
    width: 5px;
    position: absolute;
    background: #ED6643;
    left: 0;
    top: 92px;
    height: 100px;
}

请查找this更新文件的链接

它现在适用于 Chrome 和 Safari。