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

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

7 голосов | спросил Gazillion 20 MarpmTue, 20 Mar 2012 19:41:44 +04002012-03-20T19:41:44+04:0007 2012, 19:41:44

1 ответ


0

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

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

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

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

ответил BoltClock 20 MarpmTue, 20 Mar 2012 21:24:58 +04002012-03-20T21:24:58+04:0009 2012, 21:24:58

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132