IEでHTMLボタンがクリックできない

Question

「Description」というテキストが表示されたボタンがありますが、IEではクリックできません。実際、ボタンの右端はクリック可能ですが、ボタン全体とボタンのテキストコンテンツは表示されません。現代的なブラウザ（Chrome、Firefox）では正常に動作しますが、IEでは正常に動作しません。私はテストのためにIE 11を使用しています。これを引き起こしていると私はそれを修正する方法はありますか？私はできるだけ多くを取り除くことを試みてきました

...

.vertical-button { 
 
    width: 1px; 
 
    height: 20px; 
 
    background: #000; 
 
    position: absolute; 
 
    right: -68px; 
 
    top: calc(50% - 10px); 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    opacity: 0; 
 
    -webkit-transition: 0.8s; 
 
    -moz-transition: 0.8s; 
 
    -ms-transition: 0.8s; 
 
    -o-transition: 0.8s; 
 
    transition: 0.8s; 
 
} 
 

 
.vertical-button { 
 
    right: -100px; 
 
} 
 

 
.project--active .vertical-button { 
 
    opacity: 1; 
 
} 
 

 
.project__image, 
 
.project__text { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 408px; 
 
    margin: 20px auto; 
 
    margin-bottom: 0px; 
 
} 
 

 
.project__text { 
 
    height: 200px; 
 
    padding: 8px; 
 
} 
 

 
.project__image, 
 
.project__text { 
 
    width: 280px; 
 
    height: 210px; 
 
    display: inline-block; 
 
    margin: 0 auto; 
 
} 
 

 
.project__text { 
 
    padding-top: 20px; 
 
    padding-left: 20px; 
 
} 
 

 
.project { 
 
    -webkit-column-count: 2; 
 
    -moz-column-count: 2; 
 
    column-count: 2; 
 
    padding: 18px; 
 
    margin: 30px auto; 
 
    width: 614px; 
 
    height: 246px; 
 
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3); 
 
} 
 

 
.project { 
 
    padding: 20px; 
 
    width: 740px; 
 
    height: 295px; 
 
} 
 

 
.l-wrapper { 
 
    position: relative; 
 
    width: 86%; 
 
    max-width: 1024px; 
 
    margin: 0 auto; 
 
} 
 

 
.l-wrapper { 
 
    width: 80%; 
 
} 
 

 
.l-clear::after, 
 
.l-wrapper::after { 
 
    clear: both; 
 
    content: ""; 
 
    display: block; 
 
    height: 0px; 
 
    visibility: hidden; 
 
} 
 

 
.l-section { 
 
    padding: 30px 0; 
 
} 
 

 
.l-section__bg { 
 
    background-color: #F2F2F2; 
 
} 
 

 
.l-container { 
 
    position: relative; 
 
    padding-bottom: 50px; 
 
    overflow: hidden; 
 
    background-color: #FFFFFF; 
 
    z-index: 99; 
 
} 
 

 
.vertical-button__btn, 
 
.vertical-button__btn:focus, 
 
.vertical-button__btn:active { 
 
    background: none; 
 
    border: none; 
 
    display: inline; 
 
    font: inherit; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: none; 
 
    outline-offset: 0; 
 
    position: absolute; 
 
    top: 0px; 
 
    transform-origin: left top; 
 
    transform: rotate(90deg) translateX(-32%); 
 
    float: right; 
 
    padding: 5px; 
 
    cursor: pointer; 
 
    cursor: hand; 
 
} 
 

 
.vertical-button__stroke { 
 
    width: 1000px; 
 
    height: 1px; 
 
    background: #000; 
 
}

<div id="app"> 
 
    <div data-reactroot=""> 
 
    <div class="l-container"> 
 
     <div class="l-section l-section__bg"> 
 
     <div class="l-wrapper"> 
 
      <div class="project project--active"> 
 
      <div class="project__image"></div> 
 
      <div class="project__text"> 
 
       <h3 class="project__heading">Title</h3> 
 
       <div class="vertical-button"> 
 
       <button class="vertical-button__btn">Description</button> 
 
       <div class="vertical-button__stroke"></div> 
 
       </div> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

編集

私はHTMLのこの部分を削除した場合ことを発見しましたボタンはクリック可能になります...

<div class="project__image"></div> 

しかし、これはまだそれが起こっているか、それを修正する方法を理解するのに役立ちません！実際のプロジェクトでそのdivを削除することはできません。

Answer 1

私はテストするIEがありませんが、私は私の経験からいくつかのアイデアを教えてくれます。

1.別の要素がボタンに重なっていないか確認します。

IEであるため、CSSが異なるため、重複している可能性があります。その画像クラスdivを削除すると問題が解決するので、これが問題の原因になると思います。

2. HTMLを検証します。

タグを閉じることを忘れると、非常に奇妙なバグが発生し、見つけにくくなります。適切にクリックイベントを処理しませんブラウザがあるかもしれませんアンカー<a>

にそのボタンを回し

3.してみてください。 IEを使用して

4.停止:)

少なくともエッジを使用しています。