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 :)

至少使用边缘。