如何使为 Firefox 浏览器开发的网站与 Safari 和 Chrome 兼容？
Posted
技术标签:
【中文标题】如何使为 Firefox 浏览器开发的网站与 Safari 和 Chrome 兼容？【英文标题】：How do I make a website developed for Firefox browsers compatible with Safari and Chrome? 【发布时间】：2020-09-10 19:39:28 【问题描述】：首先，我对 Web 开发不是很有经验。我知道的足够多，但是当我获得浏览器兼容性时，我很挣扎。我试图弄清楚为什么 Chrome 和 Safari 以如此不同的方式阅读我网站的代码。我理解不同的浏览器读取代码的方式不同，但是我一直试图弄清楚如何在我的网站上解决这个问题一段时间，但我无法解决。
我希望我至少可以弄清楚为什么菜单在 Safari 浏览器的左侧而不是在 Firefox 浏览器中的右侧。如果我弄清楚这一点，我觉得它可以帮助我弄清楚如何清理我的其余代码，使其看起来应该在 Safari 浏览器中。我一直在试图弄清楚如何正确实施 webkit，但我还不知道如何去做。
它可能看起来这样的一个原因是因为我在 PC 上使用 Safari，这可能会使 Safari 版本看起来像它在我的计算机上的样子。以下是登录页面的屏幕截图以及它们在 Firefox 和 Safari 上的外观：
[Firefox 版本（网站的外观）][1]
[Safari 版本][2]
.nav
position: fixed;
.navbar-fixed-top
transition: background-color .25s linear;
position: fixed;
top: 0;
background-color: transparent !important;
height: 100px;
width: 100%;
z-index: 1000;
.navbar-fixed-top.scrolled
transition: background-color .25s linear;
position: fixed;
top: 0;
background-color: white !important;
display: initial;
height: 100px;
width: 100%;
z-index: 1000;
.navigation
position: fixed;
top: 0;
left: 0;
background-color: #ddbe6e;
height: 100%;
width: 100%;
display: none;
z-index: 999;
transition: all 1s ease-in 0s;
font-family: bebas-kai, sans-serif;
.navigation ul
list-style-type: none;
text-align: center;
.navigation li a
color: #222658;
.navigation ul li
padding: 30px;
#nav-list
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
.navigation.show
display: initial;
animation: fade-in .5s ease-in;
#logo
position: absolute;
top: 50%;
float: left;
transform: translateY(-50%);
margin-left: 50px;
z-index: 1000;
user-select: none;
cursor: pointer;
#logo.close
position: absolute;
top: 50%;
float: left;
transform: translateY(-50%);
margin-left: 50px;
z-index: 1000;
user-select: none;
cursor: pointer;
display: none;
#logo.scrolled
position: absolute;
top: 50%;
float: left;
transform: translateY(-50%);
margin-left: 50px;
z-index: 1000;
user-select: none;
cursor: pointer;
#wrapper
background: transparent;
display: inline-block;
position: absolute;
left: 90vw;
margin: 20px;
padding: 10px;
cursor: pointer;
z-index: 1000;
#menuTitle
position: relative;
top: 2px;
color: #222658;
font-size: 25px;
user-select: none;
transition: color .25s linear;
.circle
width: 40px;
height: 40px;
position: relative;
cursor: pointer;
.line
position: absolute;
height: 3px;
width: 70%;
background-color: #222658;
border-radius: 10px;
transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
left: 50px;
.top
top: 32%;
.middle
top: 53%;
.bottom
top: 72%;
.icon.close .top
top: 48%;
transform: rotate(45deg);
.icon.close .middle,
.icon.close .bottom
transform: rotate(-45deg);
top: 48%;
<html>
<body>
<nav class="navbar-fixed-top">
<a href="index.html"><img id="logo" src="images/core-logo.png" ></a>
<div id="wrapper">
<div class="circle icon">
<h1 id="menuTitle">Menu</h1>
<span class="line top"></span>
<span class="line middle"></span>
<span class="line bottom"></span>
</div>
</div>
<div class="navigation">
<ul id="nav-list">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="team.html">Team</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
</body>
</html>【问题讨论】：
【参考方案1】：我建议您查看一些有关 CSS 和浏览器支持的文档。 w3schools 有一个非常有趣的表格，其中包含所有标签及其兼容性。
另外，还有一个答案可以帮助您了解 webkit：How to provide CSS properties for Different browsers like Mozilla and Chrome
【讨论】：
以上是关于如何使为 Firefox 浏览器开发的网站与 Safari 和 Chrome 兼容？的主要内容，如果未能解决你的问题，请参考以下文章