Проблема с цветом фона и Google Chrome

Question

Иногда я получаю сломанный фон в Chrome. Я не получаю эту ошибку с любым другим браузером.

Это простая строка CSS, отвечающая за цвет фона тела:

body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}

Это именно то, как я получаю эту проблему. Я нажимаю на ссылку, содержащуюся в электронном письме Gmail, и получаю что-то не так (без фона). Затем я обновляю страницу, и фон полностью закрашивается.

Как решить эту проблему?

Answer 1

Никогда не слышал об этом. Попробуйте:

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}

Answer 2

Хорошо, ребята, я нашел решение , , Это не здорово, но делает трюк без побочных эффектов.

HTML:

<span id="chromeFix"></span> 

(поместите это ниже тегов тела)

CSS:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }

Что это делает, чтобы решить проблему:

Это заставляет Chrome думать, что содержание страницы на 100%, если это не так - это останавливает "тело", отображающее размер контента, и устраняет пропущенную фоновую ошибку. Это в основном делает то, что делает height: 100%, когда применяется к телу или html, но вы не получаете побочный эффект от того, что ваши фоны обрезаются при прокрутке (выше 100% высоты страницы), как вы делаете со 100% высотой на тех элементы.

Теперь я могу спать =]

Answer 3

У меня была такая же проблема на нескольких сайтах, и я исправил ее, переместив фоновый стиль из основного текста в html (который, я думаю, представляет собой вариант уже упомянутой техники body {} до html, body{}, но показывает, что вы можете сделать делать со стилем только на html), например

body {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;

}

становится

html {
   background-color:#000000;
   background-image:url('images/bg.png');
   background-repeat:repeat-x;
}
body {
   font-family:Arial,Helvetica,sans-serif;
   font-size:85%;
   color:#cccccc;
}

Это работало в IE6-8, Chrome 4-5, Safari 4, Opera 10 и Firefox 3.x без очевидных неприятных побочных эффектов.

Answer 4

Мне удалось это исправить с помощью:

html { height: 100%; }

Answer 5

HTML и рост 100% не работают в старых версиях IE.

Вы должны переместить свойства фона из элемента body в элемент html.
Это исправит перекрестие.

Answer 6

Простое, правильное, решение - определите фоновое изображение и цвет в html, а не в теле. Если вы не определили конкретную высоту (не процент) в теле, предполагается, что его высота будет такой же высокой, как требуется для содержания всего содержимого. поэтому ваш стиль фона должен идти в HTML, который представляет собой весь HTML-документ, а не только его тело. Simples.

Answer 7

Попробовав все остальные решения здесь безуспешно, я скептически попробовал решение, найденное в этой статье , и заставил его работать.

По сути, это сводится к удалению @charset "utf-8"; из вашего CSS.

Это похоже на плохую реализацию в DreamWeaver - но это помогло мне решить проблему, независимо от этого.

Answer 8

Я бы попробовал то, что предложили Логан и 1mdm, чтобы настроить CSS, но я бы действительно дождался выхода новой версии Chrome с исправленными ошибками, прежде чем отрастить седые волосы.

ИМХО текущая версия Chrome по-прежнему является альфа-версией и была выпущена, чтобы она могла распространяться в процессе разработки. У меня лично были проблемы с шириной таблицы, мой код работал в КАЖДОМ браузере, но не мог заставить его работать в Chrome.

Answer 9

Google Chrome и Safari требуется настройка для устранения проблем с телом и фоном. Мы использовали дополнительный идентификатор, как указано ниже.

<style>
body { background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; }

#body{ background:#204960 url(../images/example.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;}
</style>    
<body id="body">

Используйте оба идентификатора body и #body и введите одинаковые стили в обоих. Сделайте тег body с атрибутом id body.

Это работает для меня.

Answer 10

Я не уверен на 100%, но попробуйте заменить селектор на "html, body":

html, body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}