CSS 背景颜色和谷歌浏览器的问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/425216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Issue with background color and Google Chrome
提问by Sergio del Amo
Sometimes I get a broken background in Chrome. I do not get this error with any other browser.
有时我会在 Chrome 中看到一个破碎的背景。我在任何其他浏览器上都没有收到此错误。
This is the simple CSS line responsible for the background color of body:
这是负责主体背景颜色的简单 CSS 行：
body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
This is exactly how I get this problem. I click a link included in an Gmail's email and I get something wrong (no background). I then refresh the page and the background is colored completely.
这正是我遇到这个问题的方式。我单击 Gmail 电子邮件中包含的链接，但出现错误（无背景）。然后我刷新页面，背景完全着色。
How do fix this problem?
如何解决这个问题？
回答by Logan Serman
Never heard of it. Try:
从来没有听说过。尝试：
html, body {
width: 100%;
height: 100%;
background-color: #000;
color: #fff;
font-family: ...;
}
回答by Sergio del Amo
Ok guys, I found a solution, . It's not great but does the trick with no side effects.
好的，我找到了解决方案，。这不是很好，但没有副作用。
The HTML:
HTML：
<span id="chromeFix"></span>
(put this below the body tags)
（把它放在身体标签下面）
The CSS:
CSS：
#chromeFix { display: block; position: absolute; width: 1px; height: 100%; top: 0px; left: 0px; }
What this does to solve the issue:
这对解决问题有何作用：
It forces Chrome to think the page's content is 100% when it's not - this stops the body 'appearing' the size of the content and resolves the missing background bug. This is basically doing what height: 100%does when applied to the body or html but you don't get the side effect of having your backgrounds cut off when scrolling (past 100% page height) like you do with a 100% height on those elements.
它会强制 Chrome 认为页面的内容是 100%，而实际上不是——这会阻止正文“出现”内容的大小并解决缺少的背景错误。这基本上是height: 100%在应用于正文或 html 时执行的操作，但是您不会像在这些元素上使用 100% 高度那样在滚动（超过 100% 页面高度）时得到背景被切断的副作用。
I can sleep now =]
我现在可以睡觉了=]
回答by John Patrick
I had the same issue on a couple of sites and fixed it by moving the background styling from body to html (which I guess is a variation of the body {}to html, body{}technique already mentioned but shows that you can make do with the style on html only), e.g.
我在几个网站上遇到了同样的问题，并通过将背景样式从 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;
}
becomes
变成
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;
}
This worked in IE6-8, Chrome 4-5, Safari 4, Opera 10 and Firefox 3.x with no obvious nasty side-effects.
这适用于 IE6-8、Chrome 4-5、Safari 4、Opera 10 和 Firefox 3.x，没有明显的不良副作用。
回答by user92339
HTML and body height 100% doesn't work in older IE versions.
HTML 和 body height 100% 在较旧的 IE 版本中不起作用。
You have to move the backgroundproperties from the body element to the html element.
That will fix it crossbrowser.
您必须将 backgroundproperties 从 body 元素移动到 html 元素。
这将修复它跨浏览器。
回答by user92339
I was able to fix this with:
我能够解决这个问题：
html { height: 100%; }
回答by mauricio lopez
After trying all of the other solutions here without success, I skeptically tried the solution found in this article, and got it to work.
在尝试了这里的所有其他解决方案都没有成功之后，我怀疑地尝试了本文中找到的解决方案，并让它起作用。
Essentially, it boils down to removing @charset "utf-8";from your CSS.
从本质上讲，它归结为@charset "utf-8";从 CSS 中删除。
This seems like a poor implementation in DreamWeaver - but it did fix the issue for me, regardless.
这在 DreamWeaver 中似乎是一个糟糕的实现 - 但无论如何它确实为我解决了这个问题。
回答by Neil
Simple, correct, solution - define the background image and colour in html, not body. Unless you've defined a specific height (not a percentage) in the body, its height will be assumed to be as tall as required to hold all content. so your background styling should go into html, which is the entire html document, not just the body. Simples.
简单、正确的解决方案 - 在 html 中定义背景图像和颜色，而不是正文。除非您在正文中定义了特定的高度（不是百分比），否则将假定其高度与容纳所有内容所需的高度一样高。所以你的背景样式应该进入 html，它是整个 html 文档，而不仅仅是正文。简单。
回答by ianmcook
Adam's chromeFixsolution with Paul Alexander's pure-CSSmodification solved the problem in Chrome, but not in Safari. A couple additional tweaks solved the problem in Safari, too: width: 100%and z-index:-1(or some other appropriate negative value that puts this element behind all the other elements on the page).
Adam 的chromeFix解决方案和 Paul Alexander 的纯 CSS修改解决了Chrome 中的问题，但没有解决Safari 中的问题。一些额外的调整也解决了 Safari 中的问题：width: 100%和z-index:-1（或一些其他适当的负值，将该元素置于页面上的所有其他元素之后）。
The CSS:
CSS：
body:after {display:block; position:absolute; width:100%; height:100%; top:0px; left:0px; z-index:-1; content: "";}
回答by itsoft3g
Google Chrome and safari needs a tweak for body and background issues. We have use additional identifier as mentioned below.
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">
Use both body and #body identifier and enter same styles in both. Make the body tag with id attribute of body.
使用 body 和 #body 标识符并在两者中输入相同的样式。使用body的id属性制作body标签。
This works for me.
这对我有用。
回答by itsoft3g
I am not sure 100%, but try to replace selector with "html, body":
我不确定 100%，但尝试用“html, body”替换选择器：
html, body
{
background: black;
color: white;
font-family: Chaparral Pro, lucida grande, verdana, sans-serif;
}
