Html 按钮在IE中不可点击，但在现代浏览器中有效

在这里的示例中，

按钮。文本为“Description”的垂直按钮\uuuu btn

在除IE之外的所有浏览器中都可以悬停和单击。（我在悬停上放置了CSS边框来说明这一点。您还可以通过出现的“手”指针查看按钮何时可单击。）

警告：当我说在IE中不可点击时，我的意思是完整的按钮文本（以黄色突出显示）不可点击。奇怪的是，

按钮

元素的最右边缘确实按预期单击并悬停

是什么导致了这种行为，我如何使IE中的功能与现代浏览器相同

我只对支持IE 11和Edge感兴趣。。。IE 10及以下版本不需要支持

编辑： 另一个奇怪的行为：如果我删除元素

div.project\uu image

，按钮将变为可点击，但我不知道为什么，我需要保留div元素

.project{
-webkit列数：2；
-moz列数：2；
列数：2；
填充：20px；
保证金：30像素自动；
宽度：740px；
高度：295px；
盒影：0px 4px 10px rgba（0,0,0,0.3）；
}
.project\u图像、.project\u文本{
位置：相对位置；
宽度：280px；
最大宽度：408px；
高度：210px；
显示：内联块；
保证金：0自动；
}
.项目文本{
高度：200px；
填充：20px 8px 20px 8px；
}
.垂直按钮{
宽度：1px；
高度：20px；
背景：#000；
位置：绝对位置；
右：-100px；
顶部：calc（50%-10px）；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
不透明度：1；
-webkit转换：0.8s；
-moz跃迁：0.8s；
-ms转换：0.8s；
-o-转变：0.8s；
过渡：0.8s；
}
.垂直按钮，
.垂直按钮：焦点，
.垂直按钮\uuu btn：激活{
背景：无；
边界：无；
显示：内联；
字体：继承；
保证金：0；
填充：0；
大纲：无；
轮廓偏移：0；
位置：绝对位置；
顶部：0px；
变换原点：左上；
变换：旋转（90度）translateX（-32%）；
浮动：对；
填充物：5px；
光标：指针；
光标：手；
}
.垂直按钮\uuu btn：悬停{
边框：1px纯红；
}
.垂直按钮行程{
宽度：1000px；
高度：1px；
背景：#000；
}

汤溢
汤溢，蔬菜创意机构







描述

我确实认为这是一个z指数的问题。 如果将

z-index:200

添加到

垂直按钮

，则即使在IE中，也可以单击该按钮

.project{
-webkit列数：2；
-moz列数：2；
列数：2；
填充：20px；
保证金：30像素自动；
宽度：740px；
高度：295px；
盒影：0px 4px 10px rgba（0,0,0,0.3）；
}
.project\u图像、.project\u文本{
位置：相对位置；
宽度：280px；
最大宽度：408px；
高度：210px；
显示：内联块；
保证金：0自动；
}
.项目文本{
高度：200px；
填充：20px 8px 20px 8px；
}
.垂直按钮{
宽度：1px；
高度：20px；
背景：#000；
位置：绝对位置；
右：-100px；
顶部：calc（50%-10px）；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
不透明度：1；
-webkit转换：0.8s；
-moz跃迁：0.8s；
-ms转换：0.8s；
-o-转变：0.8s；
过渡：0.8s；
z指数：200
}
.垂直按钮，
.垂直按钮：焦点，
.垂直按钮\uuu btn：激活{
背景：无；
边界：无；
显示：内联；
字体：继承；
保证金：0；
填充：0；
大纲：无；
轮廓偏移：0；
位置：绝对位置；
顶部：0px；
变换原点：左上；
变换：旋转（90度）translateX（-32%）；
浮动：对；
填充物：5px；
光标：指针；
光标：手；
}
.垂直按钮\uuu btn：悬停{
边框：1px纯红；
}
.垂直按钮行程{
宽度：1000px；
高度：1px；
背景：#000；
}

汤溢
汤溢，蔬菜创意机构







描述

您是否已使用IE11检查您的代码片段？它与我在W7中的IE11配合得很好。在我这方面，没有需要注意的问题：）即使在IE10上，这也很奇怪。。。即使是现在，当我尝试它（包括代码片段）时，它也不起作用。在Windows 7上使用IE 11真是太棒了！成功了！