如何使我的 HTML/CSS 代码在所有浏览器上兼容？适用于 Chrome，不适用于 Safari/Edge 等

Question

我的网站托管在 bluehost 上，当我在 Chrome 上访问该地址时，它是完美的。当我访问 Safari 的地址时，“关于我”部分没有黑色背景，并且页脚被推到了正确的位置。

请在 Safari 中查看下面的链接。

Morganalexisdesigns.com

我尝试创建一个CSS。重置，但它所做的只是更改我网站的 CSS。

html,body
{

    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

body {
  
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", 
  "Helvetica, Arial", "Lucida Grande", "sans-serif";




  }

  
  body {
    
    background-image: url("assets/background.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #000000;
  
   }

/* 1920x1080 */
/* NAVBAR */
  /* Evenly Distribute Navbar Components */
  .navbar-nav > li{
    padding-left:125px;
    padding-right:125px;
    margin-right: 0;
    margin-left: 0;
 
  }
  .navbar {
    background-color: #000000;
    text-align: center;
    margin-right: 0;
    margin-left: 0;
  }
   


  #logo { 
    max-width: 600px;
    width:100%;
    margin: auto;
    margin-left: auto;
  margin-right: auto;
  }

#logo img {

  
  width: 100%;
  
  
  margin-left: auto;
  margin-right: auto;
  padding-top: 50px;
  }

/* Footer START */
footer {
  background-color: #1d1b1b;
  text-align: justify;
  bottom: 50px;
  top: 50px;
  padding-top: 5px;
  position: bottom;
} 
 /* @media (max-width:1000px) {
  .footer-menu ul{
   
    margin-top: 10px;
    margin-bottom: 20px;
  }
}  */



 /*******************************/
/********** About CSS **********/
/*******************************/
#about { background-color: #000000;
  padding-top: 0px;
  padding-bottom: 0px;
  margin-top: 10px;
  margin-bottom: 0px;
  color: #ffffff;

}
.about-img { 
  display: flex;
  align-items: center;
  justify-content: center;

}


.about {
  position: relative;
  width: 100%;
  margin: -45px 0 45px 0;
} */

.about .col-lg-6 {
  padding: 0 0 0;
  height: 50px;
}

.about .section-header {
  margin-bottom: 20px;
}

.about .about-img {
  position: relative;
  
} 






/* contact button*/
.btn{
  border: none;
  border-radius: 0px;
  color: #fff;
  text-transform: uppercase;
  padding-bottom: 15px;
  position: relative;
  background-image: linear-gradient(to top, #262626 0px, #404040 10px, #262626 10px, #333 100%);
}
.btn:hover{
  color: #fff;
}
.btn:after{
  content: "";
  width: 0;
  height: 10px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 5px 5px;
  transition: all 0.35s ease 0s;
}
.btn:hover:after{
      width: 100%
    }
    .btn.red:after{
      background: #DAD3C5;
  }




/* Contact Page */
* {
  box-sizing: border-box;
  
  
}

h2 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 25px;
  color: #fff;
  
}
/* form starting stylings ------------------------------- */
.group {
  position: relative;
  margin-bottom: 35px;
}
input {
  font-size: 18px;
  padding: 5px 10px 10px 5px;
  display: block;
  width: 100%;
  border: none;
  border-bottom: 1px solid #fff;
  background: transparent;
}

  input:focus {
      outline: none;
  }

/* LABEL ======================================= */
label {
  color: rgb(255, 255, 255);
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -20px;
  font-size: 14px;
  color: #fff;
}

/* BOTTOM BARS ================================= */
.bar {
  position: relative;
  display: block;
  width: 100%;
}

  .bar:before, .bar:after {
      content: '';
      height: 2px;
      width: 0;
      bottom: 1px;
      position: absolute;
      background: #fff;
      transition: 0.2s ease all;
      -moz-transition: 0.2s ease all;
      -webkit-transition: 0.2s ease all;
  }

  .bar:before {
      left: 50%;
  }

  .bar:after {
      right: 50%;
  }
/* active state */
input:focus ~ .bar:before, input:focus ~ .bar:after {
  width: 50%;
}

/* HIGHLIGHTER ================================== */
.highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}
input, select, textarea{        
  color: #ffffff;
}

textarea:focus, input:focus {
  color: #ffffff;
}


/* active state */
input:focus ~ .highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
  from {
      background: #fff;
  }

  to {
      width: 0;
      background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
      background: #fff;
  }

  to {
    color: #ffffff;
      width: 0;
      background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
      background: rgb(255, 255, 255);
  }

  to {
      width: 0;
      background: transparent;
  }
}


#panel {
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgb(200, 200, 200);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 5px 2px;
background: #000000;
  border-radius: 0px;
  top: 50px;
  bottom: 20px;
 
  margin-bottom: 100px; 
  
  padding-bottom: 10px ;
  
}






/* DESIGN PAGE */


#Designs { 
  margin-top: 500px;
  margin-bottom: 200px;
padding-top: 50px;
margin: auto;
}

#designtext {

  text-align: center;
  margin: auto;
 
}

#designimages { 
  display: flex;
  max-width: 650px;
  width:100%;
  margin: auto;

}

Answer 1

我在 Chrome 和 Safari 上看到同样损坏的页脚。

也许在你的情况下，差异可能是缓存。例如，当我开发 WordPress 网站时，WordPress 会自动绕过我登录的浏览器上的缓存，但要在我未登录的浏览器上查看我的更改，我必须清除各种缓存以查看我的最新更改。