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。

：之前和之后：html标签上的伪元素在Chrome中不稳定

1 个答案: