HTML按钮在IE中不可点击
问题描述:
我有一个按钮,其中的IE是不可点击的文本“说明”。实际上,它的最右边是可点击的,但不是按钮的整个按钮和文本内容。它在现代浏览器(Chrome,Firefox)中运行良好,但不在IE中。我正在使用IE 11进行测试。这是什么原因造成的,我该如何解决?HTML按钮在IE中不可点击
我一直试图剥离出尽可能多的...
.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。
答
我没有IE来测试,但我可以告诉你一些我的经验。
1.检查是否有其他元素重叠您的按钮。
作为IE浏览器,它可能会以不同方式处理CSS,因此会重叠。由于删除该图像类div可以解决问题,我猜这可能是问题的原因。
2.验证HTML。
忘记关闭标签可能会产生非常非常奇怪的错误,也很难找到。
3.尝试打开该按钮为锚<a>
有可能是谁也不会妥善处理click事件浏览器。
4.停止使用IE :)
至少使用边缘。
1.我广泛检查了CSS重叠...我在这里挠我的脑袋。 2.验证并通过。 3.也尝试过,同样的行为。我完全同意!但是我正在为用户进行测试,而不是我自己将那个恶梦浏览器作为一个整体。 – littlewolf
尝试更改“project_image”类中的值并查看它是否修复了任何内容。 – jack
也试图没有影响...唯一的价值是'位置:相对;宽度:280px; height:210px;显示:inline-block; margin:0 auto;'就像你在浏览器中看到的那样,即使没有IE。 – littlewolf