html - 导致浏览器响应问题的 CSS 解析错误

Question

我无法在我的 CSS 中找到解析错误。移动网站在 Firefox 中看起来有响应，但在 Chrome 中没有。我假设解析错误正在影响缩放。

我一直在尝试使用 W3 CSS Validator 查找错误。除了说明“解析错误”之外，没有给我足够的时间来找到错误。可能遗漏了 RBRACE，但扫描了代码却找不到遗漏的一个。也没有错别字。

@media only screen and (max-width: 600px) {

body {
 font-size: 16px;
}

#nav {
  height: 3.75em;
  position: fixed;
  top: 0;
  width: 100%;
  transition: 1s;
  border-radius: 0em;
}

#nav .scrolled {
  background-color: transparent;
}

#logo {
  position: relative;
  margin-top: 0.15em;
  margin-left: 0.0625em;
  height: 1.5em;
}

.m-hidden {
  visibility: hidden;
}

.burger {
  margin-top: -19.3em;
  margin-left: 20.625em;
  float: right;
  visibility: visible;
  position: absolute;
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 1.5625em;
  height: 0.125em;
  background-color: white;
  margin: 0.375em 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 3px) ;
  transform: rotate(-45deg) translate(-5px, 3px) ;
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}

.overlay {
 height: 100%;
 width: 100%;
 position: fixed;
 z-index: 1; /* Sit on top */
 background-color: rgb(0,0,0); /* Black fallback color */
 background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
 overflow-x: hidden; /* Disable horizontal scroll */
 transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 1.875em; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

.overlay a {
  padding: 0.5em;
  text-decoration: none;
  font-size: 1.875em;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
  text-decoration: none;
}

@media screen and (max-height: 450px) {
  .overlay a {font-size: 1.25em}
  .overlay .closebtn {
  font-size: 2.5em;
  top: 15px;
  right: 35px;
 }
}

.cover {
  height: 100%;
}

.cover h2 {
    margin-left: -0.2em;
    margin-top: 6em;
    font-size: 2.5em;
    text-align: left;
}

.who {
    height: 80%;
}

.who h1 {
    position: relative;
    margin-top: 1em;
    margin-left: 2em;
    font-size: 3.125em;
    text-shadow: 5px 0px white;
    text-align: center;
}

.who h2 {
    margin-left: 1.5625em;
    float: left;
    font-size: 0.9375em;
    width: 18.75em;
    text-align: center;
}

.who a {
    position: absolute;
    margin-top: 0em;
    margin-left: 0em;
    float: right;
    color: lightgrey;
    font-size: 0.9375em;
    text-decoration: underline;
  https://stackoverflow.com/help  visibility: hidden;
}

.service {
    height: 95%;
   /* background-image: url('../img/mobile/red.jpg');*/
}

.service h1{
    margin-top: -4.375em;
    font-size: 2em;
}

.service h2{
    width: 70%;
    font-size: 0.9375em;
}

.service_2 {
  margin: 0em;
  display: table;
  width: 100%;
  height: 95%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
}

.service_2 .inner {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  max-width: none;
}

.service_2 .content {
  text-align: right;
}

.service_2 img {
  padding-top: 1em;
  height: 6.5em;
}

.service_2 h1 {
  font-family: haboro, serif;
  font-weight: bold;
  font-size: 2em;
  text-align: right;
  margin-left: -12em;
}

.service_2 h2 {
  margin-right: 0em;
  float: right;
  text-align: right;
  font-size: 0.9375em;
  width: 18.75em;
}

.service_3 {
  height: 95%;
  margin-top: -14.7em;
}

.service_3 h1{
  font-size: 2em;
}

.service_3 h2{
  width: 70%;
  font-size: 0.9375em;
}

.service_3 span {
  font-size: 0.9375em;
}

.portfolio-title {
  margin-top: 0em;
  padding: 5em;
  text-align: center;
}

.portfolio-title h1 {
  font-size: 2.5em;
}

.portfolio-title hr {
  width: 10em;
}

.portfolio-title h3 {
  font-size: 0.9375em;
  color: white;
}

.box-wrap {
  display: table;
  padding: 0em;
}

.zoom {
  position: relative;
}

.box-content h1 {
  height: 100%;
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}


.frame {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame img {
  height: 16em;
  width: 100%;
}

.frame p {
   op: 65%;
}

.frame2 {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame2 img {
  height: 16em;
  width: 100%;
}

.frame2 p {
  top: 65%;
}

.frame3 {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame3 img {
  height: 16em;
  width: 100%;
}

.frame4 {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame4 img {
  height: 16em;
  width: 100%;
}

.frame4 p {
  top: 65%;
}

.frame5 {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame5 img {
  height: 16em;
  width: 100%;
}


.frame6 {
  display: table;
  float: none;
  height: 16em;
  width: 100%;
}

.frame6 img {
  height: 16em;
  width: 100%;
}

.project-btn {
  display: table;
  height: 3.125em;
  width: 100%;
  background-color: #C7C4BF;
  color: black;
  text-align: center;
  margin-bottom: 0em;
}

.project-btn h3 {
  padding-top: 0em;
  font-size: 0.9375em;
}

.project-btn a {
  color: black;
}

.project-btn a:hover {
  text-decoration: none;
  color: grey;
}

.contact {
  height: 60%;
  margin-bottom: 33.3em;
}

.contact h1 {
  margin: 0em;
  font-size: 1.5625em;
}

.contact-btn {
  margin-top: 1.25em;
  height: 2.5em;
  width: 9.375em;
  font-size: 0.9375em;
}

.contact-btn:hover {
  font-size: 9.375em;
}

footer {
  height: 80%;
}

.footercontent {
  margin-left: -12em;
}

footer img {
  height: 3.125em;
  margin-bottom: 0.9375em;
}

footer p:nth-child(4) {
  font-size: 0.75em;
}

footer .foot {
  font-family: haboro, serif;
  font-size: 1em;
  padding-bottom: 0.0625em;
}

footer .break {
  margin-left: 2em;
  margin-top: -0.3125em;
  border-bottom: 1px solid white;
  border-width: 1px;
  width: 4.375em;
}

footer a {
  color: white;
  text-decoration: none;
}

footer a:hover {
  text-decoration: none;
  color: grey;
}

footer i {
  font-size: 1.25em;
  margin-bottom: 0.625em;
}

.footer-icons {
  font-size: 0.625em;
  margin-right: 1em;
}

.fmobile {
  margin-left: 0.3125em;
  position: absolute;
  visibility: visible;
  align-items: center;
 }
}

Answer 1

.who a 中有文本 https://stackoverflow.com/help。删除此行。

.who a {
    position: absolute;
    margin-top: 0em;
    margin-left: 0em;
    float: right;
    color: lightgrey;
    font-size: 0.9375em;
    text-decoration: underline;
    visibility: hidden;
}

op 属性不存在。你是指 top 还是 opacity ？？

.frame p {
   op: 65%;
}