html - 导致浏览器响应问题的 CSS 解析错误
问题描述
我无法在我的 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;
}
}
解决方案
您https://stackoverflow.com/help
的.who a
. 删除此行。
.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%;
}
推荐阅读
- amazon-web-services - AWS CodePipeline 角色无权在阶段的“操作”块中对角色执行 AssumeRole
- r - ggforce geom_arc:如何计算 atan 并在预期的一侧绘制弧线
- go - Gorm如何按结果查找行?
- python - 使用Flask将带有另一个嵌套字典的字典插入mongoDB?
- java - 如果请求未使用 webClient 返回错误,我如何返回 Empty mono
- bash - 如何使用 pbrun 在 shell 脚本中运行命令
- c - 微分方程松弛技术的算法正确性
- c# - Ubbi Dubbi 如何在每个元音前加ub?
- python - 租户管理站点返回 404
- cassandra - LEFT 和 charindex:Cassandra