:之前和之后: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应该按预期工作,因为您的伪元素应该在初始包含块(视口,由html元素表示)的上下文中绘制,这正是Firefox正在做的事情.

您的特定问题被报告为Chrome错误,但尚未得到解决.作为解决方法,您可以将伪元素应用于body:

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

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