Иногда я получаю сломанный фон в Chrome. Я не получаю эту ошибку с любым другим браузером.
Это простая строка CSS, отвечающая за цвет фона тела:
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Это именно то, как я получаю эту проблему. Я нажимаю ссылку, включенную в электронную почту Gmail, и я получаю что-то неправильно (без фона). Затем я обновляю страницу, и фон полностью окрашен.
Как устранить эту проблему?
Никогда не слышал об этом. Попробуйте:
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
Хорошо, ребята, я нашел решение, , Это не здорово, но трюк без побочных эффектов.
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% -ной высотой на тех элементы.
Я могу спать сейчас =]
У меня была такая же проблема на нескольких сайтах и исправлена ее, перемещая стиль фона с тела на 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 без видимых неприятных побочных эффектов.
Я смог исправить это с помощью:
html { height: 100%; }
HTML и высота тела 100% не работают в старых версиях IE.
Вам нужно переместить backgroundproperties из элемента body в элемент html.
Это исправит кроссбраузер.
Простой, правильный, решение - определить фоновое изображение и цвет в html, а не в теле. Если вы не определили определенную высоту (не процент) в теле, ее высота будет считаться такой же высокой, как требуется для хранения всего содержимого. поэтому ваш стиль фона должен идти в html, который представляет собой весь html-документ, а не только тело. Simples.
Попробовав все другие решения здесь без успеха, я скептически попробовал решение, найденное в в этой статье, и заставил его работать.
По существу, это сводится к удалению @charset "utf-8"; из вашего CSS.
Это похоже на плохую реализацию DreamWeaver - но это действительно помогло мне решить.
Я не уверен, что 100%, но попробуйте заменить селектор на "html, body":
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
Я бы попробовал, что предложил Logan и 1mdm, чтобы настроить CSS, но я действительно буду ждать появления новой версии Chrome с исправленными ошибками, прежде чем появиться белые волосы.
IMHO текущая версия Chrome все еще является альфа-версией и была выпущена так, что она может распространяться, пока она находится в разработке. У меня лично были проблемы с шириной таблицы, мой код работал нормально в КАЖДОМ браузере, но не мог заставить его работать в 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 тела.
Это работает для меня.
Решение 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: "";}
У меня было то же самое в браузерах Chrome и Safari, например, в браузере Webkit. Я подозреваю, что это не ошибка, но неправильное использование css, которое "ломает" фон.
В вышеприведенном вопросе свойство фона фона устанавливается равным:
background: black;
Это хорошо, но не совсем правильно. Там нет фона изображения, таким образом...
background-color: black;
Я тоже вижу эту проблему с Chrome, если я правильно помню, если вы минимизируете и затем максимизируете свое окно, оно также исправляет его?
Не слишком сильно использовал Chrome, так как он был выпущен, но это определенно то, что я обвиняю в Google, поскольку код, который я проверял, был плотным.
Все сказали, что ваш код в порядке, и вы знаете, что он работает в других браузерах без проблем. Итак, пора бросать науку и просто попробовать материал:)
Попробуйте поместить цвет фона в сам тег тела вместо/как-хорошо, как в CSS. Может быть, настаивать снова (redudantly) в Javascript. В какой-то момент Chrome должен будет поместить фон так, как вам хочется каждый раз. Может быть проблема с синхронизацией...
[Если какая-либо из этих функций, конечно, вы можете переключить на серверной стороне, так что забавный код появляется только в Chrome. И через несколько месяцев, когда Chrome изменился, и проблема исчезла... ну, беспокойтесь об этом позже.]
Как ни странно, это не происходит на каждой странице, и, похоже, он никогда не работает даже при обновлении.
Мои решения заключались в том, чтобы добавить {height: 100%;}.
Если у вас все еще есть проблемы, вы можете попробовать переключить "верх" на "нижний" в chromeFix выше, а также div, а не span
<div id="chromeFix"></div>
стиль:
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
Используется моя таблица каскадных стилей:
body {background-color: #FAF0E6; font-family: arial, sans-serif }
Он работал в Internet Explorer, но не работал в Firefox и Chrome. Я изменил его на:
body {background: #FAF0E6; font-family: arial, sans-serif }
(т.е. я удалил -color.)
Он работает во всех трех браузерах. (Мне пришлось перезапустить Chrome.)
Когда вы создаете стиль CSS, используя Dreamweaver для веб-проектирования, Dreamweaver добавляет код по умолчанию, например
@charset "utf-8″;Попробуйте удалить это из таблицы стилей, фоновое изображение или цвет должны отображаться правильно
Это должно быть проблема WebKit, как в Safari 4, так и в Chrome.
body, html {
width: 100%;
height: 100%;
}
Работал для меня:)
Я уверен, что это ошибка в Chrome. Скорее всего, это произойдет, если вы измените размер браузера в полноэкранном режиме, а затем переключите вкладки. И иногда, если вы просто переключаете вкладки/открываете новую. Приятно слышать, что вы нашли "исправление".
Вот как я решил решить проблему:
Это была настоящая проблема, очевидно, что тег тела, определенный в 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, навсегда навеки искали причину тега тега не работали.
Конечный результат выглядит примерно так:
