如何使为 Firefox 浏览器开发的网站与 Safari 和 Chrome 兼容？答案

【问题标题】：How do I make a website developed for Firefox browsers compatible with Safari and Chrome?如何使为 Firefox 浏览器开发的网站与 Safari 和 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" alt="logo" height="46" width="176"></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>

【问题讨论】：

标签： html css firefox safari webkit

【解决方案1】：

我建议您查看一些有关 CSS 和浏览器支持的文档。 w3schools 有一个非常有趣的表格，其中包含所有标签及其兼容性。

另外，还有一个答案可以帮助您了解 webkit：How to provide CSS properties for Different browsers like Mozilla and Chrome

【讨论】：