粘滞位置在IE或Safari中不起作用 [英] Position sticky not working in IE or Safari

问题描述

我正在用CSS创建卡.在Chrome浏览器中可以很好地运行，但在IE/Safari浏览器中则不能.

I am creating a card in CSS. It works perfectly fine in Chrome but doesn't work in IE/Safari browser.

#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

推荐答案

将#nb的位置更改为相对即可解决此问题.

Changing the position of #nb to relative fixes the issue.

#nb {
    position: relative;
    width: 280px;
    height: 450px;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

这篇关于粘滞位置在IE或Safari中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！