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