嵌套链接在Mozilla，IE和Edge中不起作用

Question

由于嵌套不当，我的HTML存在轻微问题。尝试在Chrome中点击我的链接时，它会正确锚定到设定点。但是，在Internet Explorer，Mozilla Firefox和Edge中它没有。实际上，似乎链接已被禁用。我将如何清理我的嵌套来解决这个问题？

＆＃13;

＆＃13;

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;
}

＆＃13;

<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;

＆＃13;

＆＃13;

感谢您的帮助。

Answer 1

对于#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);
}