在Mozilla，IE和Edge中不能使用的嵌套链接

Question

由于嵌套不正确，我的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>

感谢您的帮助。

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