html - 伪类 :before and :after doesn't stick to element on some browsers

Question

我遇到伪类 :before 和 :after 的问题，我想通过使用 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

任何时候你想要相对于它的父元素定位一个绝对元素，你需要将父元素的位置属性设置为 relative 或 absolute。因此，现在您的 ::before 和 ::after 伪元素是相对于主体而不是 #intro 元素定位的。同样尝试重置边距/填充在诊断这样的问题时从来没有伤害过:

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

#intro {
  position: relative;
}

祝你好运!