在这里的示例中,带有文本"描述"的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>
z 索引的问题。如果将z-index: 200
添加到vertical-button
,则该按钮将可单击,即使在IE中也是如此。
.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;
z-index: 200
}
.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>