Проблема с цветом фона и Google Chrome
Иногда у меня бывает битый фон в Chrome. Я не получаю эту ошибку ни в одном другом браузере.
Это простая строка CSS, отвечающая за цвет фона тела:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Именно так я и получаю эту проблему. Я нажимаю ссылку, содержащуюся в электронном письме Gmail, и получаю что-то не так (без фона). Затем я обновляю страницу, и фон полностью окрашивается.
Как исправить эту проблему?
У меня это тоже было в последний месяц ... но я использую firefox, и это происходит практически на всех страницах.
Это определенно проблема WebKit. Это происходит как в Chrome, так и в Safari. Я отправил в Apple отчеты об ошибках, но до сих пор не получил ответа и не увидел исправления в обновлении. Все еще происходит в Safari 5.
Ура Чапараль Pro! просто скажи :)
Пожалуйста, исправьте ваши битые изображения
Ответы 22
Не уверен на 100%, но попробуйте заменить селектор на "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Я тоже видел эту проблему с Chrome, если я правильно помню, если вы минимизируете, а затем максимизируете свое окно, это тоже исправит?
На самом деле я не слишком много использовал Chrome с момента его выпуска, но в этом я определенно виню Google, поскольку код, который я проверял, был герметичным.
Никогда об этом не слышал. Пытаться:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
установка цвета фона как для html, так и для тела (Chrome 5.0.375.125)
Просто хотел добавить, что это случилось со мной в Safari. Добавление «фона» в HTML сработало. Что-то вроде: <style type = "text / css"> html {background-image: url (<path_to_bg_image>); } </style>
Я бы попробовал то, что предлагали Логан и 1mdm, чтобы настроить CSS, но я бы действительно дождался выхода новой версии Chrome с исправленными ошибками, прежде чем отращивать седые волосы.
IMHO текущая версия Chrome все еще является альфа-версией и была выпущена для распространения, пока она находится в разработке. У меня лично были проблемы с шириной таблицы, мой код отлично работал в ВСЕХ браузерах, но не мог заставить его работать в Chrome.
Все говорят, что ваш код в порядке, и вы знаете, что он без проблем работает в других браузерах. Так что пора бросить науку и просто попробовать :)
Попробуйте поместить цвет фона В самом теге body вместо / as-well-as в CSS. Может быть, настаивать снова (избыточно) на Javascript. В какой-то момент Chrome будет каждый раз размещать фон так, как вы хотите. Может быть проблема с синхронизацией ...
[Если что-то из этого сработает, конечно, вы можете переключить его на стороне сервера, чтобы забавный код отображался только в Chrome. И через несколько месяцев, когда Chrome изменится и проблема исчезнет ... ну, об этом позже.]
Я смог исправить это с помощью:
html { height: 100%; }
это не сработало для меня, Chrome 5.0.375.125, установка цвета фона как на html, так и на тело сработала.
Хорошо, ребята, я нашел решение, . Это не очень хорошо, но помогает без побочных эффектов.
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% высотой этих элементов.
Теперь я могу спать =]
Для решения, основанного исключительно на CSS, измените #chromeFix на body: after и добавьте content: "" в атрибуты css.
Как ни странно, на самом деле это происходит не на каждой странице, и, похоже, не всегда работает даже при обновлении.
Моим решением было также добавить {height: 100%;}.
ЕСЛИ у вас все еще возникают проблемы, вы можете попробовать переключить «сверху» на «низ» в chromeFix выше, а также на div, а не на диапазон.
<div id = "chromeFix"></div>
стиль:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
HTML и высота тела 100% не работают в старых версиях IE.
Вам необходимо переместить backgroundproperties из элемента body в элемент html. Это исправит кроссбраузер.
Моя каскадная таблица стилей использовала:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
Он работал в Internet Explorer, но не работал в Firefox и Chrome. Я изменил его на:
body {background: #FAF0E6; font-family: arial, sans-serif }
(т.е. я удалил -color.)
Работает во всех трех браузерах. (Мне пришлось перезапустить Chrome.)
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 тела.
У меня это работает.
When you create CSS style using Dreamweaver for web designing, Dreamweaver adds a default code such as
@charset “utf-8″;Try removing this from your stylesheet, the background image or colour should display properly
Это должна быть проблема WebKit, как в Safari 4, так и в Chrome.
body, html {
width: 100%;
height: 100%;
}
Сработало у меня :)
У меня была такая же проблема на нескольких сайтах, и я исправил ее, переместив стиль фона из body в 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 без явных неприятных побочных эффектов.
Этот ответ не сработал (с использованием браузера Chrome). Но после того, как я обновил файл CSS и html, я вернулся к предыдущему определению наличия только тега body. Он работает и с этим, т.е. у меня больше нет html {...} defn в моем CSS. Есть предположения?? Спасибо.
Решение Адама chromeFix с модификацией Пола Александра чистый CSS решило проблему в Хром, но не в Сафари. Пара дополнительных настроек также решила проблему в 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: "";}
Простое, правильное решение - определяйте фоновое изображение и цвет в html, а не в теле. Если вы не определили конкретную высоту (не в процентах) в теле, предполагается, что его высота равна высоте, необходимой для размещения всего содержимого. поэтому стиль вашего фона должен перейти в HTML, который представляет собой весь HTML-документ, а не только его тело. Простые.
Я не уверен, зависит ли ваш ответ от конкретного браузера. Chrome требует html CSS defn один раз, а затем после его загрузки. Вы вернетесь назад, чтобы прокомментировать html-информацию. Все работает только с тегом body в файле CSS. Ваше здоровье.
Я почти уверен, что это ошибка в Chrome. Скорее всего, это произойдет, если вы измените размер браузера на полноэкранный режим, а затем переключите вкладки. А иногда просто переключаешь вкладки / открываешь новую. Приятно слышать, что вы нашли "исправление".
У меня было то же самое в браузерах Chrome и Safari, также известных как Webkit. Я подозреваю, что это не ошибка, а неправильное использование css, которое «ломает» фон.
В приведенном выше вопросе для свойства фона тела установлено значение:
background: black;
Это нормально, но не совсем правильно. Фона изображения нет, поэтому ...
background-color: black;
Попробовав все остальные решения здесь безуспешно, я скептически попробовал решение, найденное в эта статья, и заставил его работать.
По сути, все сводится к удалению @charset "utf-8"; из вашего CSS.
Это похоже на плохую реализацию в DreamWeaver, но, тем не менее, это помогло мне решить проблему.
Удалите @charset "utf-8"; из вашей таблицы стилей. (по ссылке)
Привет, я думаю, что Брэд говорит, что вообще плохая практика просто отвечать ссылкой - желательно дать обзор того, что содержит ссылка, чтобы, если ссылка когда-нибудь сломается, информация все еще здесь.
Вот как я решил проблему:
Это была настоящая проблема, очевидно, что тег тела, определенный в CSS, не был взят.
Моя среда: браузер 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 не работал.
Окончательный результат будет примерно таким:
У меня тоже периодически возникала эта проблема. Приятно знать, что я не сойду с ума.