:before et :after éléments pseudo sur la balise html est motivé par Chrome

Je suis en train d'apprendre comment utiliser le :before et :after pseudo-éléments. J'essaye d'ajouter un fond noir pour le bas de la page comme un collant, pied de page, mais cela ne semble pas fonctionner correctement.

Fondamentalement, j'ai une répétition d'une image comme arrière-plan de l'élément HTML puis-je ajouter un absolu div positionné au fond, avec un solide fond noir.

Je voudrais juste préciser que c'est une expérience d'apprentissage et pas vraiment comment je voudrais obtenir le même effet, mais ce que j'essaie fonctionne dans Firefox mais pas sur Chrome!

Voici mon 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;
}

Dans FF que la page est affichée comme je l'avais espérer, mais dans google Chrome, la page entière est noir... Toutes les idées, je fais ce mal?

il n'y a rien "avant" de la balise html, hormis le DOCTYPE, je ne pense pas que c'est valide CSS.
Donc, je ne devez utiliser ces éléments pseudo sur les éléments dans le corps des balises?
oui, l'utilisation du corps au lieu de la balise HTML
qui est correct.
Ilich: 1) ce n'est pas la façon dont ces pseudo-éléments de travail. 2) Quel est le DOCTYPE avoir à faire avec CSS? C'est parfaitement valide CSS.

OriginalL'auteur Gazillion | 2012-03-20

  1. 6

    Votre CSS doit fonctionner comme prévu, comme votre pseudo-élément doit être dessiné dans le contexte de la initiale bloc contenant (la fenêtre d'affichage, représentée par le html élément) de toute façon, ce qui est exactement ce que Firefox est en train de faire.

    Votre problème a été signalé comme une Chrome bug, mais il n'a pas été abordé. Comme solution de contournement, vous pouvez appliquer votre pseudo-élément body à la place:

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

    En fonction de votre mise en page, vous pouvez avoir besoin de garder votre html règle ou d'un changement à body.

    C'est exactement ce que c'est! Je sens spécial d'avoir à venir à travers un Chrome bug 😛 Merci pour l'aide!
    Je ne crois pas que c'est un bug en soi. Est HTML censé avoir "contenu"? HTML qui est la toile. Je ne serais pas surpris si un navigateur ne implicitement claque display:none sur tous les éléments à l'intérieur d'un élément HTML à l'exception <body>. Sinon, on aurait toujours bien d'avoir des espaces dans les DOM arbre au-dessus et au-dessous du corps.
    Lister: Voici mon point de vue: html est l'élément racine dans les DOM. head et body sont ses enfants, qui sont également représentées par des nœuds DOM. Le :before et :after pseudo-éléments de décrire l'insertion du contenu avant ou après un élément du document contenu de l'arbre, de sorte qu'ils doit travailler avec les html élément, car son document contenu de l'arbre se compose de la head et body éléments. Comme vous l'avez dit, html est la "toile", où les éléments visuels sont tirés, et head a un style initial de display: none de toute façon.
    Je peux aller avec la plupart, mais pas votre mot de la fin "de la tête a un style initial de display: none de toute façon." Qui ne peut pas être vrai, parce que les enfants d'un élément avec display:none sont jamais dessinée, jamais! Ici, "Ce comportement pas être remplacé par le réglage de l'affichage de la propriété des descendants." SeaMonkey est l'Inspecteur DOM me dit aussi que l'élément HTML de cette page a display:block.
    Lister: de Sorte que défini display: block sur le head élément de trop!

    OriginalL'auteur BoltClock