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

问题描述 投票：-1回答：1

首先，我对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个回答
0
投票

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

此外，还有一个答案可能会帮助您找出Webkit：How to provide CSS properties for Different browsers like Mozilla and Chrome

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.