css - :before and :after pseudo elements on html tag is wonky in Chrome

Question

我正在尝试学习如何使用 :before 和 :after 伪元素。我正在尝试将黑色背景添加到页面底部作为粘性页脚，但它似乎无法正常工作。

基本上我有一个重复的图像作为 HTML 元素的背景，然后我添加一个绝对 div 定位在底部，具有纯黑色背景。

我只想指出，这是一个学习实验，并不是真正要达到相同效果的方法，而是我正在尝试在 Firefox 中工作，而不是在 Chrome 中工作!

这是我的 CSS:

html {
    background-image: url('images/template/html-bg.jpg');
    background-position: top left;
    background-repeat: repeat-x;
    background-color: #0e0e0e;
    height: 100%;
    position: relative;
}

html:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

在 FF 中，页面按我预期的方式呈现，但在 Chrome 中，整个页面都是黑色的...任何想法，我做错了吗？

Answer 1

您的 CSS 应该按预期工作，因为您的伪元素应该在 initial containing block 的上下文中绘制(视口(viewport)，由 html 元素表示)无论如何，这正是 Firefox 正在做的。

您的特定问题被报告为 Chrome bug ，但尚未解决。作为解决方法，您可以将伪元素应用于 body:

body:before {
    content: "";
    display: block;
    background-color: #000;
    width: 100%;
    height: 138px;
    bottom: 0px;
    position: absolute;
}

根据您的布局，您可能需要保留 html 规则或将其更改为 body。