嵌套链接和按钮不适用于Mozilla，IE和Edge

Question

正如标题所述，由于嵌套不当（我很可能），我的HTML存在轻微问题。我遇到的问题是我作为锚点锚点的链接无法正常工作，就像它们被禁用一样。此代码适用于Chrome，但不适用于Mozilla，Edge和Internet Explorer。是否有一个简单的解决方案，还是要求我完全重新格式化我的HTML结构？我在这里提供了一些额外的例子供参考（仍然没有用）。

Codepen：

https://codepen.io/haca/pen/dzgogG?editors=1100

HTML：

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

CSS：

body{
    margin: 0;
    font-family: 'Raleway', sans-serif;
    background: #2e2e2e;
    overflow-x: hidden;
}

*{
    transition: .3s;
}

#about{
  width: 100%;
  height: 300px;
  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;
}

它在Chrome中有效，但在Firefox，Edge或Internet Explorer中无效。我想知道如何让它在这些浏览器中运行？感谢