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

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

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

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

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

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

Ответы

Ответ 1

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

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

Ответ 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% -ной высотой на тех элементы.

Я могу спать сейчас =]

Ответ 3

У меня была такая же проблема на нескольких сайтах и ​​исправлена ​​ее, перемещая стиль фона с тела на html (который, как я думаю, представляет собой вариант уже описанного метода body {} to 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 без видимых неприятных побочных эффектов.

Ответ 4

Я смог исправить это с помощью:

html { height: 100%; }

Ответ 5

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

Вам нужно переместить backgroundproperties из элемента body в элемент html.
Это исправит кроссбраузер.

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

<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 и вводить одинаковые стили в обоих. Сделайте тег тела с атрибутом id тела.

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

Ответ 11

Решение Adam chromeFix с модификацией Paul Alexander pure-CSS разрешило проблему в Chrome, но не в Safari. > . Пара дополнительных настроек также решила проблему в Safari: width: 100% и z-index:-1 (или другое подходящее отрицательное значение, которое помещает этот элемент за все остальные элементы на странице).

CSS:

body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}

Ответ 12

У меня было то же самое в браузерах Chrome и Safari, например, в браузере Webkit. Я подозреваю, что это не ошибка, но неправильное использование css, которое "ломает" фон.

В вышеприведенном вопросе свойство фона фона устанавливается равным:

background: black;

Это хорошо, но не совсем правильно. Там нет фона изображения, таким образом...

background-color: black;

Ответ 13

Я тоже вижу эту проблему с Chrome, если я правильно помню, если вы минимизируете и затем максимизируете свое окно, оно также исправляет его?

Не слишком сильно использовал Chrome, так как он был выпущен, но это определенно то, что я обвиняю в Google, поскольку код, который я проверял, был плотным.

Ответ 14

Все сказали, что ваш код в порядке, и вы знаете, что он работает в других браузерах без проблем. Итак, пора бросать науку и просто попробовать материал:)

Попробуйте поместить цвет фона в сам тег тела вместо/как-хорошо, как в CSS. Может быть, настаивать снова (redudantly) в Javascript. В какой-то момент Chrome должен будет поместить фон так, как вам хочется каждый раз. Может быть проблема с синхронизацией...

[Если какая-либо из этих функций, конечно, вы можете переключить на серверной стороне, так что забавный код появляется только в Chrome. И через несколько месяцев, когда Chrome изменился, и проблема исчезла... ну, беспокойтесь об этом позже.]

Ответ 15

Как ни странно, это не происходит на каждой странице, и, похоже, он никогда не работает даже при обновлении.

Мои решения заключались в том, чтобы добавить {height: 100%;}.

Ответ 16

Если у вас все еще есть проблемы, вы можете попробовать переключить "верх" на "нижний" в chromeFix выше, а также div, а не span

<div id="chromeFix"></div>

стиль:

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

Ответ 17

Используется моя таблица каскадных стилей:

body {background-color: #FAF0E6; font-family: arial, sans-serif }

Он работал в Internet Explorer, но не работал в Firefox и Chrome. Я изменил его на:

body {background: #FAF0E6; font-family: arial, sans-serif }

(т.е. я удалил -color.)

Он работает во всех трех браузерах. (Мне пришлось перезапустить Chrome.)

Ответ 18

Когда вы создаете стиль CSS, используя Dreamweaver для веб-проектирования, Dreamweaver добавляет код по умолчанию, например

@charset "utf-8″;

Попробуйте удалить это из таблицы стилей, фоновое изображение или цвет должны отображаться правильно

Источник

Ответ 19

Это должно быть проблема WebKit, как в Safari 4, так и в Chrome.

Ответ 20

body, html { 
   width: 100%;
   height: 100%;
}

Работал для меня:)

Ответ 21

Я уверен, что это ошибка в Chrome. Скорее всего, это произойдет, если вы измените размер браузера в полноэкранном режиме, а затем переключите вкладки. И иногда, если вы просто переключаете вкладки/открываете новую. Приятно слышать, что вы нашли "исправление".

Ответ 22

Вот как я решил решить проблему:

Это была настоящая проблема, очевидно, что тег тела, определенный в CSS, не был поднят.

Body tag not working in Chrome/Safari

Моя среда: браузер Chrome/Safari,

В первый раз, когда это не сработает, поэтому в соответствии с рекомендацией потока здесь я закончил добавление файла css с записью html

Пример файла CSS: mystyle.css

<style type=""text/css"">
html {
 background-color:#000000;
 background-repeat:repeat-x;
 }

body {
 background-color: #DCDBD9;
color: #2C2C2C;
font: normal 100% Cambria, Georgia, serif;
}
</style>

Пример файла html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
  <meta name="generator" content="HTML Tidy for Mac OS X (vers 31 October 2006 - Apple Inc. build 15.6), see www.w3.org">

  <title>Test Html File</title>
  <link rel="stylesheet" href="mystyle.css" type="text/css">
</head>

<body>
  <h1>Achieve sentence with Skynet! READ MORE</a></h1>
</body>
</html>

После первой загрузки он будет работать в Chrome, а затем вернуться к комментариям файла CSS в html-записи, поэтому ваш измененный CSS будет

<style type=""text/css"">
// html {
//    background-color:#000000;
//    background-image:url('bg.png');
//    background-repeat:repeat-x;
// }

body {
    background-color: #DCDBD9;
    color: #2C2C2C;
    font: normal 100% Cambria, Georgia, serif;
    }

  </style>

Очевидно, что это ошибка в webkit, так же, как и в Safari. Спасибо, что поделились информацией html, навсегда навеки искали причину тега тега не работали.

Конечный результат выглядит примерно так:

After fixing the html tag