45

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

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

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

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

如何解决这个问题？

4

22 回答 22

49

从来没有听说过。尝试：

html, body {
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: ...;
}
于 2009-01-08T20:19:31.757 回答
9

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

的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% 页面高度）获得背景被切断的副作用。

我现在可以睡觉了=]

于 2009-01-20T00:05:09.390 回答
6

我在几个网站上遇到了同样的问题，并通过将背景样式从 body 移动到 html 来修复它（我猜这是已经提到的body {}tohtml, 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，没有明显的不良副作用。

于 2010-05-03T12:32:45.197 回答
5

我能够解决这个问题：

html { height: 100%; }
于 2009-01-16T14:01:15.780 回答
5

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

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

于 2009-04-17T20:58:00.797 回答
2

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

于 2010-08-04T09:54:14.023 回答
2

在这里尝试了所有其他解决方案都没有成功后，我怀疑地尝试了本文中找到的解决方案，并让它工作。

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

这在 DreamWeaver 中似乎是一个糟糕的实现——但无论如何，它确实为我解决了这个问题。

于 2010-09-07T01:40:18.833 回答
1

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

html, body 
{
   background: black;
   color: white;
   font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
于 2009-01-08T20:16:08.953 回答
1

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

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

于 2009-01-10T09:31:30.747 回答
1

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 标识符并在两者中输入相同的样式。使用body的id属性制作body标签。

这对我有用。

于 2009-10-12T11:57:47.503 回答
1

Adam 的chromeFix解决方案和 Paul Alexander 的纯 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: "";}
于 2010-06-24T15:45:51.357 回答
1

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

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

background: black;

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

background-color: black;
于 2010-08-26T07:48:32.647 回答
0

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

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

于 2009-01-08T20:18:42.490 回答
0

每个人都说你的代码很好，你知道它可以在其他浏览器上正常工作。所以是时候放弃科学，尝试一些东西了：）

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

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

于 2009-01-10T12:10:13.217 回答
0

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

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

于 2009-01-30T17:11:55.663 回答
0

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

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

风格：

#chromeFix { display: block; position: absolute; width: 1px; height: 100%; bottom: 0px; left: 0px; }
于 2009-03-04T04:23:40.040 回答
0

我使用的级联样式表：

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

它在 Internet Explorer 中工作，但在 Firefox 和 Chrome 中失败。我将其更改为：

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

（即我删除了-color。）

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

于 2009-09-22T15:03:30.407 回答
0

当您使用 Dreamweaver 为网页设计创建 CSS 样式时，Dreamweaver 会添加一个默认代码，例如

@charset “utf-8″;

尝试从样式表中删除它，背景图像或颜色应该正确显示

来源

于 2009-11-02T18:07:35.493 回答
0

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

于 2009-12-16T18:57:14.593 回答
0 
body, html { 
   width: 100%;
   height: 100%;
}

为我工作:)

于 2010-04-07T11:30:43.590 回答
0

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

于 2010-08-04T13:17:59.293 回答
0

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

这是实际的问题，显然 CSS 中定义的 body 标签没有被拾取。

正文标签在 Chrome/Safari 中不起作用

我的环境：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 标签不起作用。

最终输出是这样的：

修复html标签后

于 2012-07-04T21:52:26.877 回答