:before 和 :after html 标签上的伪元素在 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（视口，由 html 元素表示）的上下文中绘制，这正是 Firefox 正在做的事情。

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

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

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