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

时间：2009-01-08 17:49:20

标签： css google-chrome

有时候我会在Chrome中破坏背景。我没有得到任何其他浏览器的此错误。

这是负责身体背景颜色的简单CSS线：

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

这正是我遇到这个问题的方法。我点击了Gmail电子邮件中包含的链接，但我得到了错误（没有背景信息）。然后我刷新页面，背景完全着色。

如何解决这个问题？

22 个答案:

答案 0 :(得分：49)

从未听说过它。尝试：

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

答案 1 :(得分：8)

好的，我找到了解决方案， 。它并不好，但没有副作用。

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％高度那样得到背景切断的副作用在这些元素上。

我现在可以睡觉=]

答案 2 :(得分：6)

我在几个网站上遇到了同样的问题并通过将背景样式从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，没有明显令人讨厌的副作用。

答案 3 :(得分：5)

我能够解决这个问题：

html { height: 100%; }

答案 4 :(得分：5)

HTML和正文高度100％在较旧的IE版本中不起作用。

您必须将backgroundproperties从body元素移动到html元素 这将修复它的crossbrowser。

答案 5 :(得分：2)

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

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

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

答案 6 :(得分：2)

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

答案 7 :(得分：1)

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

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

答案 8 :(得分：1)

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

恕我直言，目前的Chrome版本仍为alpha版本，并已发布，以便在开发过程中可以传播。我个人遇到了桌面宽度问题，我的代码在每个浏览器中运行良好，但无法在Chrome中运行。

答案 9 :(得分：1)

我在Chrome和Safari aka Webkit浏览器中都有同样的东西。我怀疑它不是一个bug，而是错误地使用css“打破”背景。

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

background: black;

哪个好，但不完全正确。没有图像背景，因此...... 

background-color: black;

答案 10 :(得分：1)

谷歌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标记。

这适合我。

答案 11 :(得分：1)

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

答案 12 :(得分：0)

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

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

Body tag not working in 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信息，一直在寻找身体标签无效的原因。

最终输出是这样的：

After fixing the html tag

答案 13 :(得分：0)

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

答案 14 :(得分：0)

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

为我工作：）

答案 15 :(得分：0)

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

答案 16 :(得分：0)

  

使用Dreamweaver创建CSS样式进行Web设计时，Dreamweaver会添加默认代码，例如

@charset “utf-8″;
     

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

Source

答案 17 :(得分：0)

我使用的级联样式表：

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

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

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

（即我删除了-color。）

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

答案 18 :(得分：0)

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

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

式：

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

答案 19 :(得分：0)

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

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

答案 20 :(得分：0)

每个人都说你的代码很好，而且你知道它可以在其他浏览器上运行而没有问题。 所以是时候放弃科学，只是尝试一下：）

尝试将背景颜色放在body标签中，而不是像在CSS中一样。也许在Javascript中再次（减少）坚持。在某些时候，Chrome必须每次都按照您的意愿放置背景。可能是一个时间解释问题......

[当然，如果任何此类工作，您可以在服务器端切换它，以便有趣的代码只显示在Chrome中。几个月后，Chrome发生了变化，问题就消失了......好吧，以后再担心。]

答案 21 :(得分：0)

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

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

相关问题
最新问题