html - 使 safari 和 Firefox 中的 CSS 外观相同

Question

我是 Web 开发的新手，我在设计时使用了 Chrome 作为参考。我的一些功能在 safari 和 firefox 中不起作用——例如，下拉列表（联系人和库存商）只会在点击时打开 chrome 而不是其他浏览器。我添加了 -moz- 和 -webkit- PREFIX，但它仍然不起作用。我也在尝试更改 Firefox 和 safari 的字体大小，但这也不起作用。我使用此属性更改了其他一些元素，例如可以正常工作的交叉淡入淡出图像动画不确定我做错了什么，近年来找不到答案。此外，firefox 不会识别应用于普通话文本的根字体，但 safari 和 chrome 可以工作。它在 chrome 中的外观->

它在 Firefox 中的外观 ->

HTML + CSS

@font-face {
   font-family: Hiragino Sans GB;
   src: url("//db.onlinewebfonts.com/t/3f086dbc376893f56b4a9c4d3cac5df9.eot");
}

:root {
   --grCol1: rgb(247, 245, 245);
   --grCol2: #ffffff;
   --grCol3: rgb(236, 235, 235);
   --grCol4: rgb(247, 245, 245);
   --svg: rgb(204, 201, 201);
   --gradient: radial-gradient(var(--grCol1), var(--grCol3), var(--grCol4));

}

html {
   scroll-behavior: smooth;
   padding: 0;
   -moz-font-size: 10px;
   -webkit-font-size: 15px;
   font-size: 16px;
   font-size-adjust:0.5;

}
.contact {
   position: relative;
   top: 5vh;
   right: 0;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;

}

.contactbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.contactbtn:hover {
   opacity: 0.6;
}

.contact ul,
.contact-a ul {
   position: absolute;
   left: -10vw;
   margin-top: 20px;
   width: 300px;
   height: 150px;
   font-size: 1.5rem;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   transform: translateY(-10px);
   transition: all 0.4s ease;
   -webkit-transform: translateY(-10px);
   -webkit-transition: all 0.4s ease;
   -moz-transform: translateY(-10px);
   -moz-transition: all 0.4s ease;

}

.contact a,
.contact-a a {
   color: black;
   text-decoration: none;
}

.contact a:hover,
.contact-a a:hover {
   /* opacity: 0.6; */
   background-color: var(--grCol3);
}

.contactbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

/* about page contact */

.contact-a {
   position: absolute;
   top: 5vh;
   left: 5vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;
   color: var(--grCol3);
}

.contact-a ul {
   align-items: flex-start;
   left: 0;
}

/* about page */

.about-container {
   /* border: solid 2px purple; */
   width: 90vw;
   height: 100vh;
   position: absolute;
   top: 0;
   /*left: -90vw; */
   box-shadow: 10px 0px 10px 1px #aaaaaa;
}

.textSection {

   width: 35vw;
   height: 90vh;
   position: relative;
   top: 5vh;
   left: 47vw;
   display: flex;
   justify-content: center;
   align-items: center;
   /* border: solid 2px purple; */

}

.about {

   position: absolute;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
   transition: all 1s;
   text-indent: 1.5em;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 4rem 2rem;
}

.transparent {
   opacity: 0;
}

.eng {
   font-family: Helvetica, sans-serif;
   font-weight: bold;
   font-size: 1.1rem;
   line-height: 1.6;
   text-align: justify;
   color: black;


}

.mandarin {

   font-family: Hiragino Sans GB;
   -moz-font-family: Hiragino Sans GB;
   font-size: 1.1rem;
   line-height: 2;
   text-align: justify;
   text-transform: uppercase;
   font-weight: bold;
   color: black;
   padding: 3rem;
}


.langChange {
   position: absolute;
   font-size: 2rem;
   left: 84vw;
   top: 88vh;
   color: black;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.langChange:hover {
   opacity: 0.6;
   transform: translateY(5px);
}

.stockist {
   position: relative;
   display: inline;
   top: -85vh;
   right: -20vw;
   font-family: Helvetica, sans-serif;
   height: 10vh;
   letter-spacing: 3px;

}

.stockistbtn {
   color: white;
   text-transform: uppercase;
   font-size: 1.5rem;
   font-weight: bold;
   background: none;
   border: none;
   text-decoration: none;
   cursor: pointer;
   outline: none;

}

.stockistbtn:hover {
   opacity: 0.6;
}

.stockist ul {
   position: absolute;
   left: -9vw;
   margin-top: -5vh;
   width: 300px;
   height: 150px;
   font-weight: bold;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-end;
   list-style: none;
   text-transform: uppercase;
   font-size: 1rem;
   opacity: 0;
   pointer-events: none;
   transform: translateY(-10px);
   -moz-transform: translateY(-10px);
   -webkit-transform: translateY(-10px);
   transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -webkit-transition: all 0.4s ease;
}

.stockist p {
   color: var(--grCol3);
   text-decoration: none;
}

.stockist p:hover {
   background-color: black;
}

.stockistbtn:focus+ul {
   opacity: 1;
   pointer-events: all;
   transform: translateY(0);
   -moz-transform: translateY(0);
   -webkit-transform: translateY(0);
   outline: none;
}

#crossfade {
   position: absolute;
   top: 0;
   left: 0;
   width: 40vw;
   height: 100vh;
   z-index: -10;
   background-size: cover;
   animation: fade-about linear 16s infinite;
   -webkit-animation: fade-about linear 16s infinite;
   -moz-animation: fade-about linear 16s infinite;
}

@keyframes fade-about {
   0% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   25% {
      background-image: url("/img/Home/tag\ 150dpi.jpg")
   }

   50% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   75% {
      background-image: url("/img/Home/CARE\ LABEL\ 150DPI.jpg")
   }

   100% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

}


@-moz-keyframes fade-about {
   0% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   25% {
      background-image: url("/img/Home/tag\ 150dpi.jpg")
   }

   50% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

   75% {
      background-image: url("/img/Home/CARE\ LABEL\ 150DPI.jpg")
   }

   100% {
      background-image: url("/img/Home/updated\ portrait_150dpi.jpg")
   }

}

<section class="about-container">
   <div class="textSection">

      <div class="eng about" id="eng">
         <p>Shek Leung is a London-based eponymous studio run by Samson (Shek Yen) Leung. Shek Leung,
            through moving images, translates intangible emotions and narratives into the tangibles. It is a
            brand that pursues the altruism and honesty through acceptance of imperfection in artisanal
            craftsmanship and subtle details. We hope to create a sense of humanistic touch in the dialogues we
            have with our audiences.<br></p><br>
         <p>At Shek Leung, we do not define our customers by sexuality. They embrace their vulnerability
            with confidence and express quiet sensuality through masculinity. It is through tactile textures
            and sensitive details that we bring this vision to life.</p><br>
         <p>Born in Taiwan and raised in Hong Kong, Samson Shek Yen Leung completed his BA and MA Fashion in
            Womenswear at Central Saint Martins, both collections of which were selected and showcased at the
            CSM press show and London Fashion Week. <br><br> Whilst pursuing his education, Samson’s professional
            experiences broadly encompass a wide range of leading fashion houses, including Proenza Schouler in
            New York; Craig Green and Aitor Throup in London; Taro Horiuchi and Written Afterwards in Tokyo.
         </p>
      </div>
      <div class="mandarin about transparent" id="man">
         <p>
            (Mandarin characters go here. (had to edit that part out because Stack overflow wasn't accepting my question with it)
         </p>
      </div>
   </div>
   <button class="langChange">⥃&lt;/button>
   <div class="contact-a">
      <button class="contactbtn">Contact</button>
      <ul class="contact-content">
         <li>
            <p>For Any Enquiries→&lt;/p>
         </li>
         <li><a href="mailto:[e-mail]" target="_blank">[e-mail]</a></li>
         <li>[phone]</li><br>
         <li><a href="https://www.instagram.com/samsonleung/?hl=en" target="_blank">Instagram</a></li>
      </ul>
   </div>
   <div class="stockist">
      <button class="stockistbtn">Stockist</button>
      <ul class="stockist-content">
         <li>
            <p>COMING SOON</p>
         </li>

      </ul>
   </div>
   <div id="crossfade">
   </div>
</section>

标签： htmlcssprefix