: przed i: po pseudo elementach na znaczniku html jest wonky w Chrome

Question

Próbuję nauczyć się używać: przed i: po pseudo elementów. Próbuję dodać czarne tło na dole strony jako przyklejoną stopkę, ale wygląda na to, że działa nieprawidłowo.

Zasadniczo mam powtarzający się obraz jako tło elementu HTML, a następnie dodaję absolutny div umieszczony na dole z jednolitym czarnym tłem.

Chciałbym zaznaczyć, że jest to eksperyment edukacyjny, a nie w jaki sposób osiągnęłam ten sam efekt, ale próbuję pracować w przeglądarce Firefox, ale nie w Chrome!

Oto mój 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; 
} 

W FF strona jest renderowane jak bym się spodziewać, ale w Chrome cała strona jest czarna ... Wszelkie pomysły, ja to robię źle?

Answer 1

Twój CSS powinien działać zgodnie z oczekiwaniami, ponieważ Twój pseudoelement powinien być narysowany w kontekście initial containing block (widok, reprezentowany przez element html), a właśnie to robi Firefox.

Twój szczególny problem został zgłoszony jako Chrome bug, ale nie został rozwiązany. Jako obejście można zastosować swoją pseudo-element do body Zamiast:

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

W zależności od układu, może trzeba też utrzymać zasadę html lub zmienić go na body również.