HTML按鈕在IE中不可點擊

Question

我有一個按鈕，其中的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。

忘記關閉標籤可能會產生非常非常奇怪的錯誤，也很難找到。

3.嘗試打開該按鈕爲錨<a>

有可能是誰也不會妥善處理click事件瀏覽器。

4.停止使用IE :)

至少使用邊緣。