问题与背景颜色和谷歌浏览器
有时我会在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: ...; }
好吧，我find了一个解决scheme 。 这不是很好，但没有副作用的伎俩。
HTML：
<span id="chromeFix"></span>
（把这个放在body标签的下面）
CSS：
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
这样做解决了这个问题：
它强制Chrome浏览器认为页面的内容是100％，否则会阻止内容的大小，并解决缺less的背景错误。 这基本上是做什么height: 100%时适用于身体或HTML，但是当滚动（过去100％的页面高度）像100％身高的时候，你没有得到背景切断的副作用那些元素。
我现在可以睡了=]
我在几个网站上也遇到了相同的问题，并通过将背景样式从body移动到html（我认为这是body {}一个变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没有明显的讨厌的副作用。
我能够解决这个问题：
html { height: 100%; }
HTML和身高100％在较旧的IE版本中不起作用。
您必须将body元素的backgroundproperties移动到html元素。
这将修复交叉浏览器。
简单，正确的解决scheme – 在html中定义背景图像和颜色，而不是body。 除非你已经在身体中定义了一个特定的高度（不是百分比），否则它的高度将被认为是保持所有内容所需的高度。 所以你的背景样式应该进入HTML，这是整个HTML文档，而不仅仅是身体。 Simples。
在尝试所有其他的解决scheme后，我没有成功，我怀疑地尝试了这篇文章中find的解决scheme，并将其解决。
本质上，它归结为删除@charset "utf-8"; 从你的CSS。
这在DreamWeaver中似乎是一个糟糕的实现 – 但无论如何，它确实为我解决了这个问题。
我不确定100％，但尝试用“html，body”replaceselect器：
html, body { background: black; color: white; font-family: Chaparral Pro, lucida grande, verdana, sans-serif; }
我会尝试什么Logan和1mdmbuild议，我们将调整CSS，但我真的会等待一个新的Chrome版本出来，出现固定的错误，在白发之前。
恕我直言，目前的Chrome版本仍然是alpha版本，并已发布，以便它可以在开发过程中进行传播。 我个人有问题的表宽度，我的代码在每个浏览器工作正常，但无法使其在Chrome中工作。
谷歌浏览器和Safari浏览器需要调整正文和背景问题。 我们使用下面提到的附加标识符。
<style> body { background:#204960 url(..http://img.dovov.comexample.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px; } #body{ background:#204960 url(..http://img.dovov.comexample.gif) repeat-x top; margin:0; padding:0; font-family:Tahoma; font-size:12px;} </style> <body id="body">
使用body和#body标识符，并在两者中input相同的样式。 用身体的id属性做身体标记。
这对我有用。
Adam的chromeFix解决scheme与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浏览器中，我也有同样的事情。 我怀疑这不是一个错误，但不正确的使用CSS“打破”的背景。
在上面的问题中，正文背景属性设置为：
background: black;
这很好，但不完全正确。 没有图像背景，因此…
background-color: black;
我也看到了Chrome的这个问题，如果我没有记错，如果你最小化，然后最大化你的窗口，它也修复了？
自从发布以来，还没有真正使用过Chrome，但这绝对是我在Google上的责任，因为我检查的代码是密封的。
大家都说你的代码是好的，而且你知道它可以在其他浏览器上正常工作。 所以现在是时候放弃科学，只是尝试的东西 🙂
尝试把背景颜色放在body标签本身而不是/ as-well中，就像在CSS中一样。 也许再坚持（redudantly）在Javascript中。 在某些时候，Chrome将不得不随时随地放置背景。 可能是一个时间解释的问题…
[当然，这些工作中的任何一个都可以在服务器端切换，所以有趣的代码只能在Chrome中显示。 在几个月后，当Chrome发生变化，问题消失…好，以后再担心。]
它必须是Safari 4和Chrome中的WebKit问题。
我很确定这是Chrome中的一个错误。 如果您将浏览器全屏resize，则很可能会发生这种情况，然后切换选项卡。 有时如果你只是切换标签/打开一个新的。 很高兴听到你find了一个“修复”。
当您使用Dreamweaver创buildCSS样式进行网页devise时，Dreamweaver会添加一个默认代码，如
@charset “utf-8″;尝试从样式表中删除，背景图片或颜色应该正确显示
资源
body, html { width: 100%; height: 100%; }
为我工作:)
以下是我最终解决问题的方法：
这是真正的问题，显然在CSS中定义的body标签没有被拾取。
我的环境：Chrome浏览器/ Safari，
第一次当它不起作用，所以根据这里的线程推荐，我最终添加了与HTML条目的CSS文件
示例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中的bug，在Safari中也看到了同样的行为。 感谢分享html信息，一直围绕着为什么身体标记不工作。
最终的输出是这样的：
奇怪的是，它并没有真正发生在每个页面上，即使刷新它也不会总是工作。
我的解决scheme是添加{height: 100%;}以及。
我使用的级联样式表：
body {background-color: #FAF0E6; font-family: arial, sans-serif }
它在Internet Explorer中工作，但在Firefox和Chrome中失败。 我把它改成：
body {background: #FAF0E6; font-family: arial, sans-serif }
（即我删除了-color 。）
它适用于所有三个浏览器。 （我必须重新启动Chrome。）
如果你仍然有麻烦，你可以尝试在上面的chromeFix中切换“顶部”到“底部”，也可以使用div而不是跨度
<div id="chromeFix"></div>
样式：
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
- 为什么document.body null在我的JavaScript？
- 如何在Google Chrome检查器中插入HTML元素？
- websocket自动closures连接
- 在Chrome中，Facebook给出了“不安全的JavaScript尝试访问带有URL的框架”错误
- 如何强制在Android版Chrome中重新加载
- 如何在“–allow-file-access-from-files”模式下使用Chrome启动HTML？
- jQuery`.is（“：visible”）`不能在Chrome中工作
- 使用键盘快捷键浏览Googlesearch结果
- 在Google Chrome中检查jsfiddle.net上的JavaScript
