【发布时间】：2018-04-16 16:08:04
【问题描述】：
在此处的示例中，带有“描述”文本的button.vertical-button__btn 在除 IE 之外的所有浏览器中都可以悬停和点击。 （我在悬停时放置了一个 CSS 边框来说明这一点。您还可以通过出现的“手”指针来查看按钮何时可点击。）
警告：当我说它在 IE 中不可点击时，我的意思是完整的按钮文本（以黄色突出显示）不可点击。奇怪的是，button 元素的最右边缘确实按预期单击和悬停。
是什么导致了这种行为，如何使 IE 中的功能与现代浏览器中的功能相同？
我只对支持 IE 11 和 Edge 感兴趣...不需要支持 IE 10 及以下版本。
编辑：
另一个奇怪的行为：如果我删除元素 div.project__image 按钮变得可点击，但我不知道为什么，我需要 div 元素保留。
.project {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
padding: 20px;
margin: 30px auto;
width: 740px;
height: 295px;
box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}
.project__image, .project__text {
position: relative;
width: 280px;
max-width: 408px;
height: 210px;
display: inline-block;
margin: 0 auto;
}
.project__text {
height: 200px;
padding: 20px 8px 20px 8px;
}
.vertical-button {
width: 1px;
height: 20px;
background: #000;
position: absolute;
right: -100px;
top: calc(50% - 10px);
display: flex;
flex-direction: column;
justify-content: center;
opacity: 1;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-ms-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
}
.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__btn:hover {
border: 1px solid red;
}
.vertical-button__stroke {
width: 1000px;
height: 1px;
background: #000;
}<div class="project project--active">
<div class="project__image">
<a href="http://www.soupisgoodfood.com">
<img class="image" alt="soupisgoodfood.com" src="img/hl.jpg">
</a>
</div>
<div class="project__text">
<h3 class="project__heading">Soup Overflow</h3>
<p class="project__tagline">Soup Overflow, the creative agency of Vegetables</p>
<ul>
<li class="project__list-item">
<a class="project__link" href="http://www.soupisgoodfood.com">View Flavors</a>
</li>
<li class="project__list-item project__button">
<a class="project__link" href="">Description</a>
</li>
</ul>
<div class="vertical-button">
<button class="vertical-button__btn" style="background-color: yellow;">Description</button>
<div class="vertical-button__stroke"></div>
</div>
</div>
</div>【问题讨论】：
-
你用 IE11 检查过你的 sn-p 吗？它适用于我在 W7 中的 IE11。就我而言，没有任何问题需要注意 :) 即使在 IE10 仿真上
-
这很奇怪......即使现在我尝试它（包括 sn-p）它也不起作用。在带有 IE 11 的 Windows 7 上
标签： html css internet-explorer cross-browser