位置粘滯不工作在IE或Safari

我在CSS中創建一個卡。它在Chrome中運行得非常好，但在IE/Safari瀏覽器中不起作用。位置粘滯不工作在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"> 
 
\t <a href="http://www.wissentechnology.com/banking-financial/"><img 
 
\t \t class="bimg" 
 
\t \t src="https://wissen-kenvent.rhcloud.com/wp-content/uploads/2017/05/Banking-Financial.jpg" 
 
\t \t style="width: 100%;" /> 
 
\t \t <h5 style="font-size: x-large; color: #000000; padding-top: 15px;">Banking 
 
\t \t \t & Finance</h5> 
 
\t \t <h4 
 
\t \t \t style="color: #000000; padding-top: 15px; text-align: justify; padding-left: 7%; padding-right: 7%;">We 
 
\t \t \t bring the right mix of domain and technical expertise to help you 
 
\t \t \t take emerging imperatives head on and translate them to competitive 
 
\t \t \t advantage.</h4> </a> 
 
</div>

創建一個JSFiddle

來源

2017-05-25 Ashish Payal

'position：sticky' is not supported by IE-> http://caniuse.com/css-sticky/embed/ – sol

更改#nb的相對修復問題的立場。

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

來源

2017-05-25 15:31:11 Jacksonfive

位置粘滯不工作在IE或Safari

回答

相關問題