Pseudoclasses：之前和之後：在某些瀏覽器上不堅持元素

Question

我遇到了僞類問題：之前和之後：我想通過使用position：absolute和top/bottom將元素粘貼到父類的底部等我想這：

#intro{ 
    background: url('../img/bg.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    height: 100vh; 
    width: 100vw; 
} 
#intro:before{ 
    content:""; 
    display: inline-block; 
    border-width: 0px 350px 200px 0px; 
    border-style: solid; 
    border-color: transparent rgb(255, 255, 255) transparent transparent; 
    position: fixed; 
    top: 0; 
    right: 0; 
    z-index: 3; 
} 
#intro:after{ 
    content: ""; 
    display: inline-block; 
    border-width: 0px 350px 200px 0px; 
    border-style: solid; 
    border-color: transparent transparent rgb(255, 255, 255) transparent; 
    position: absolute; 
    bottom:0; 
    left: 0; 
} 

但你可以在照片下面看到了它那移動了一下，在標準Android瀏覽器它的工作原理應該如何。 image 有沒有解決方案來解決這個問題？

Answer 1

無論何時您想要定位絕對元素相對於其父元素，您都需要將父元素的位置屬性設置爲相對或絕對。因此，現在您的::before和::after僞元素相對於主體而不是#intro元素。同樣嘗試一個保證金/填充重置從未在診斷這樣的問題時感到痛苦：

*, 
*::before, 
*::after { 
    padding: 0; 
    margin: 0; 
} 

#intro { 
    position: relative; 
} 

祝你好運！