Проблема с цветом фона и Google Chrome - PullRequest
45 голосов
/ 08 января 2009

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

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

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

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

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

Ответы [ 22 ]

1 голос
/ 26 августа 2010

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

В приведенном выше вопросе свойство background body имеет значение:

background: black;

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

background-color: black;
1 голос
/ 24 июня 2010

Решение chromeFix Адама с модификацией Пола Александра 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: "";}
0 голосов
/ 05 июля 2012

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

Это была настоящая проблема, ясно, что тег body, определенный в 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, всегда охотились за тем, почему тег body не работал.

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

After fixing the html tag

0 голосов
/ 10 января 2009

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

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

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

0 голосов
/ 04 августа 2010

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

0 голосов
/ 30 января 2009

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

Моим решением было добавить также {height: 100%;}.

0 голосов
/ 04 марта 2009

Если у вас все еще есть проблемы, вы можете попробовать переключить «top» в «chromeFix» выше, а также «div» вместо «span»

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

стиль:

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
0 голосов
/ 07 апреля 2010
body, html { 
   width: 100%;
   height: 100%;
}

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

0 голосов
/ 16 декабря 2009

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

0 голосов
/ 02 ноября 2009

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

@charset “utf-8″;

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

Источник

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...