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

我正在学习响应式编码，但我似乎遇到了一个我无法弄清楚的小问题。我使用引导框架。如何修复Safari和Chrome中响应代码的视觉差异

在网站上工作时，我意识到在Safari上查看时会有一些差异。 Chrome看起来就像我期望的那样，但在Safari上标题转移。导航坐标上的水平橙色条向上移动，短垂直橙色条跳到屏幕中间。然而，这只发生在大尺寸。所有其他窗口大小看起来不错。

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

该网站是www.jennytaingdesign.com

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

任何建议或答案下载将非常感激。谢谢！

来源

2014-10-27 Jenny

您的网站有一些问题：

头宽度应当流动，不给它提供固定的宽度。
您不必为桌面和移动设备使用两个徽标。相反，您可以使用一个徽标并根据需要调整img宽度。
头部应包含以下内容：徽标，导航栏和橙色线条。在你的情况下，它只包含标志。
您可以通过使用具有特定高度的div和：在伪元素之前创建橙色线条的所需效果。
您不必在每个断点处提供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浏览器。

来源

2014-10-31 08:52:39 shadeed9

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

回答

相关问题