背景颜色和谷歌浏览器的问题答案

【问题标题】：Issue with background color and Google Chrome背景颜色和谷歌浏览器的问题
【发布时间】：2010-09-30 07:50:09
【问题描述】：

有时我会在 Chrome 中看到破碎的背景。使用任何其他浏览器都不会出现此错误。

这是负责正文背景颜色的简单 CSS 行：

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

这正是我遇到这个问题的方式。我单击了 Gmail 电子邮件中包含的链接，但出现了错误（无背景）。然后我刷新页面，背景就完全着色了。

如何解决这个问题？

【问题讨论】：

我也间歇性地遇到过这个问题。很高兴知道我不会发疯。
这绝对是 WebKit 问题。它发生在 Chrome 和 Safari 中。我已经向 Apple 发送了关于它的错误报告，但我还没有收到回复或在更新中看到修复。 Safari 5 中仍在发生。
我在上个月也遇到过这种情况......但我使用的是Firefox，它基本上发生在所有页面中。
万岁 Chaparral Pro！只是说':)
请修复损坏的图片

标签： css google-chrome

【解决方案1】：

我不确定 100%，但尝试将选择器替换为“html, body”：

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

【讨论】：

【解决方案2】：

我也看到了 Chrome 的这个问题，如果我没记错的话，如果你最小化然后最大化你的窗口，它也会修复它吗？

自从 Chrome 发布以来，并没有真正过多地使用它，但这绝对是我责怪 Google 的原因，因为我检查它的代码是密封的。

【讨论】：

【解决方案3】：

没听说过。试试：

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

【讨论】：

将背景颜色设置为 html 和 body 工作 (Chrome 5.0.375.125)
只是想补充一点，这发生在我的 Safari 中。将“背景”添加到 HTML 中起作用。类似于：

【解决方案4】：

我会尝试 Logan 和 1mdm 的建议，调整 CSS，但我真的会等待新的 Chrome 版本修复错误，然后再长白发。

恕我直言，当前的 Chrome 版本仍然是 alpha 版本，并且已发布，以便它可以在开发过程中传播。我个人遇到了表格宽度的问题，我的代码在每个浏览器中都能正常工作，但无法在 Chrome 中工作。

【讨论】：

【解决方案5】：

每个人都说您的代码很好，并且您知道它可以在其他浏览器上正常运行。 所以是时候放弃科学，尝试一些东西了 :)

尝试将背景颜色放在 body 标签本身而不是/as-well-as 在 CSS 中。也许在 Javascript 中再次（重复地）坚持。在某些时候，Chrome 必须每次都按照您的需要放置背景。可能是时间解释问题...

[如果其中任何一项工作，当然，您可以在服务器端切换它，这样有趣的代码只会显示在 Chrome 中。几个月后，当 Chrome 发生变化并且问题消失时......好吧，以后再担心。]

【讨论】：

【解决方案6】：

我能够解决这个问题：

html { height: 100%; }

【讨论】：

这对我不起作用，Chrome 5.0.375.125，将背景颜色设置为 html 和正文都有效。

【解决方案7】：

好的，我找到了解决方案， .这不是很好，但没有副作用。

HTML：

<span id="chromeFix"></span>

（把这个放在body标签下面）

CSS：

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

解决问题的方法：

它会强制 Chrome 认为页面的内容是 100%，而实际上不是 - 这会阻止正文“显示”内容的大小并解决缺少背景的错误。这基本上是在做height: 100% 在应用于 body 或 html 时所做的事情，但是当滚动时（超过 100% 的页面高度），您不会像使用 100% 的高度那样获得背景被切断的副作用元素。

我现在可以睡觉了=]

【讨论】：

对于纯 CSS 解决方案，将 #chromeFix 更改为 body:after 并将 content: "" 添加到 css 属性。

【解决方案8】：

奇怪的是，它实际上并没有发生在每个页面上，即使刷新也似乎并不总是有效。

我的解决方案是也添加{height: 100%;}。

【讨论】：

【解决方案9】：

如果您仍然遇到问题，您可以尝试在上面的 chromeFix 中将 'top' 切换为 'bottom'，以及 div 而不是 span

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

风格：

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

【讨论】：

【解决方案10】：

HTML 和 body height 100% 在旧版 IE 中不起作用。

您必须将背景属性从 body 元素移动到 html 元素。
这将修复它跨浏览器。

【讨论】：

【解决方案11】：

我使用的层叠样式表：

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

它在 Internet Explorer 中有效，但在 Firefox 和 Chrome 中失败。我把它改成：

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

（即我删除了-color。）

它适用于所有三种浏览器。（我不得不重新启动 Chrome。）

【讨论】：

【解决方案12】：

Google Chrome 和 Safari 需要针对正文和背景问题进行调整。我们使用了如下所述的附加标识符。

<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属性制作body标签。

这对我有用。

【讨论】：

【解决方案13】：

当您使用 Dreamweaver 为网页设计创建 CSS 样式时，Dreamweaver 会添加一个默认代码，例如
@charset “utf-8″;
尝试从样式表中删除它，背景图像或颜色应该可以正常显示

Source

【讨论】：

【解决方案14】：

它必须是WebKit 问题，因为它在 Safari 4 和 Chrome 中都存在。

【讨论】：

【解决方案15】：

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

为我工作:)

【讨论】：

【解决方案16】：

我在几个网站上遇到了同样的问题，并通过将背景样式从 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 标签的定义。它也适用于此，即我的 css 中不再有 html{...} defn。有什么想法吗？？谢谢。

【解决方案17】：

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: "";}

【讨论】：

【解决方案18】：

简单、正确的解决方案——在 html 中定义背景图像和颜色，而不是正文。除非您在正文中定义了特定高度（不是百分比），否则将假定其高度与容纳所有内容所需的高度一样高。所以你的背景样式应该进入 html，这是整个 html 文档，而不仅仅是正文。简单。

【讨论】：

我不确定您的答案是否特定于浏览器。 Chrome 需要 html CSS defn 一次，然后加载它。你回去评论html信息。一切都只适用于 CSS 文件中的 body 标签。干杯。

【解决方案19】：

我很确定这是 Chrome 中的一个错误。如果您将浏览器大小调整为全屏，然后切换选项卡，很可能会发生这种情况。有时，如果您只是切换标签/打开一个新标签。不过很高兴听到您找到了“修复”。

【讨论】：

【解决方案20】：

我在 Chrome 和 Safari aka Webkit 浏览器中都有相同的东西。我怀疑这不是错误，而是错误使用 css 会“破坏”背景。

在上面的问题中，body 背景属性设置为：

background: black;

这很好，但并不完全正确。没有图像背景，因此...

background-color: black;

【讨论】：

【解决方案21】：

在这里尝试了所有其他解决方案都没有成功后，我怀疑地尝试了this article 中的解决方案，并让它发挥作用。

基本上，它归结为从您的 CSS 中删除 @charset "utf-8";。

这在 DreamWeaver 中的实现似乎很糟糕 - 但无论如何它确实为我解决了问题。

【讨论】：

从您的样式表中删除 @charset "utf-8";。（来自链接）
嗨，我认为布拉德的意思是，只用链接回答通常是不好的做法 - 最好概述链接包含的内容，这样如果链接破坏了信息还在这里。

【解决方案22】：

这是我最终解决问题的方法：

这是真正的问题，显然 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 中的错误，在 Safari 中也看到了相同的行为。感谢分享 html 信息，一直在寻找为什么 body 标签不起作用。

最终的输出是这样的：

【讨论】：