: before и: after псевдоэлементы в теге html в Chrome - PullRequest
Новая
       20

: before и: after псевдоэлементы в теге html в Chrome

7 голосов
/ 20 марта 2012

Я пытаюсь научиться использовать псевдоэлементы: 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 вся страница черная... Есть идеи, я делаю это неправильно?

1 Ответ

6 голосов
/ 20 марта 2012

Ваш CSS должен работать должным образом, так как ваш псевдоэлемент должен быть нарисован в контексте исходного содержащего блока (область просмотра, представленная элементом html) в любом случае, что именно Firefox делает.

Ваша конкретная проблема была зарегистрирована как Chrome bug , но она не была устранена. В качестве обходного пути вы можете применить свой псевдоэлемент к body вместо: 

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

В зависимости от макета вам может понадобиться либо сохранить правило html, либо изменить его на body.

...