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