由于嵌套不当,我的HTML存在轻微问题。尝试在Chrome中点击我的链接时,它会正确锚定到设定点。但是,在Internet Explorer,Mozilla Firefox和Edge中它没有。实际上,似乎链接已被禁用。我将如何清理我的嵌套来解决这个问题?
body{
margin: 0;
font-family: 'Raleway', sans-serif;
background: #2e2e2e;
overflow-x: hidden;
}
*{
transition: .3s;
}
#abt{
width: 100%;
height: 100vh;
background-color: cyan;
}
#hero{
height: 50%;
min-height:400px;
width: 100vw;
background: url("imgs/space2.gif");
background-size: 11%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
transition: none;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
z-index: -1;
}
#hero h3 img{
height: 1em;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
transform: skewY(3deg);
}
#hero h1{
font-size: 3.5em;
color: rgb(245, 251, 255);
margin: 0;
margin-bottom: 1.5vh;
font-weight: 100;
text-shadow: 0 1px 0 #d1d1d1,
0 2px 0 #909090,
0 3px 0 #626161;
margin-left: 5vw;
margin-right: 5vw;
margin-top: 3vh;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#hero h3{
font-size: 1.5em;
color: rgb(245, 251, 255);
margin: 0;
font-weight: 100;
text-shadow: 0 1px 0 #d1d1d1,
0 2px 0 #909090,
0 3px 0 #626161;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#options{
margin-top: 5vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3vh;
margin-top: 3vh;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(3deg);
-ms-transform: skewY(3deg);
-moz-transform: skewY(3deg);
-o-transform: skewY(3deg);
transform: skewY(3deg);
}
#options button{
color: rgba(78, 78, 78, 0.92);
background: rgb(245, 251, 255);
border: none;
border-radius: 3px;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
font-size: 1.2em;
margin: 5px;
}

<div id="backdrop">
<div id="hero">
<h1>Haca</h1>
<h3>Student</h3>
<div id="options">
<a href="#abt" alt="link">About Link</a>
</div>
</div>
<div>
<div id="abt">About Section</div>
</div>
&#13;
感谢您的帮助。
答案 0 :(得分:0)
对于#hero id中的z索引,您需要将其更改为-1以外的值。我把它关掉然后就可以了。如果能为您解决问题,请告诉我。新的CSS应如下所示:
#hero{
height: 50%;
min-height:400px;
width: 100vw;
background: url("imgs/space2.gif");
background-size: 11%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
transition: none;
-webkit-transform-origin: left bottom;
-ms-transform-origin: left bottom;
-moz-transform-origin: left bottom;
-o-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: skewY(-3deg);
-ms-transform: skewY(-3deg);
-moz-transform: skewY(-3deg);
-o-transform: skewY(-3deg);
transform: skewY(-3deg);
}