：before和：after在html标签上的伪元素在Chrome中是不可靠的 [英] :before and :after pseudo elements on html tag is wonky in Chrome

问题描述

我想学习如何使用：before和：after伪元素。我试图在页面底部添加一个黑色背景作为粘性页脚，但它似乎不能正常工作。

I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly.

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

Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.

我想指出，是一个学习实验，而不是真正的我将实现相同的效果，但我正在尝试是在Firefox工作，但不是在Chrome！

I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!

这里是我的CSS： / p>

Here's my 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中，页面呈现为我所期望的，页面是黑色的...任何想法，我做错了吗？

In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?

推荐答案

- 元素应在初始包含块的上下文中绘制a>（视口，由 html 元素表示）。这正是Firefox正在做的事。

Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.

您的特定问题已报告为 Chrome错误，但它有已被处理。作为解决方法，您可以将您的伪元素应用于 body ：

Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:

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

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

Depending on your layout, you may need to either keep your html rule or change it to body as well.

这篇关于：before和：after在html标签上的伪元素在Chrome中是不可靠的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！