我正在用 CSS 创建一张卡片。它在 Chrome 中工作得很好，但在 IE/Safari 浏览器中不起作用。
#nb {
position: sticky;
width: 280px;
height: 450px;
margin: 0 auto;
overflow: hidden;
text-align: center;
}
#nb:hover:after {
background: #f79031!important;
}
#nb::after {
content: '';
position: absolute;
width: 940%;
height: 100%;
top: 170px;
right: -502%;
background: #ffffff;
transform-origin: 54% 0;
transform: rotate(129deg);
z-index: -1;
}
#nb h5{text-align: left;
line-height: 25px;
padding-left: 7%;}
<div id="nb">
<a href="http://www.wissentechnology.com/banking-financial/"><img
class="bimg"
src="https://wissen-kenvent.rhcloud.com/wp-content/uploads/2017/05/Banking-Financial.jpg"
style="width: 100%;" />
<h5 style="font-size: x-large; color: #000000; padding-top: 15px;">Banking
& Finance</h5>
<h4
style="color: #000000; padding-top: 15px; text-align: justify; padding-left: 7%; padding-right: 7%;">We
bring the right mix of domain and technical expertise to help you
take emerging imperatives head on and translate them to competitive
advantage.</h4> </a>
</div>
创建了一个JSFiddle https://jsfiddle.net/w7uszgry/
Webkit 是Apple Safari 浏览器中使用的HTML/CSS 渲染引擎。
Use -webkit-sticky代替sticky对于Safari。
#nb {
position: -webkit-sticky;
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
