在IE 8中未显示HTML元素的背景颜色

Question

5

我在网站上使用<body>标签作为三个div的包装器，该网站的每个背景颜色都是白色。

我已经在CSS中将html和body的背景颜色设置为#fff，并且该网站在每个浏览器中（包括IE 6和7）都正确呈现，但在IE8中出现问题：

只有一个div（中央内容）显示了其背景颜色。我甚至尝试直接内联设置html样式，如下所示：<html style =“background-color：＃fff”>，但似乎没有改变任何东西。

甚至不确定可能导致此错误。

- Donald Jenkins

请问您能给我们提供代码/网站地址吗？ - Blender

当然：我已经在这里发布了页面的CSS和HTML代码：http://jsfiddle.net/jDmtg/。要查看其效果，请访问：http://donaldjenkins.net/。 - Donald Jenkins

Stephan Muller：感谢您的建议。我没有标记为已回答的原因是，嗯，提供的答案都没有起作用... xD 当有帮助的建议时，我总是会投赞成票。但如果我做错了什么，请告诉我！ - Donald Jenkins

4个回答

4

当您将此代码插入到您的HTML中时会发生什么？

body div
{
  background-color: white !important;
}

通常情况下，浏览器会将最后一行读取的CSS应用于元素，因此background-color: red; background-color: blue;会导致背景颜色为蓝色。

!important告诉浏览器忽略所有其他属性的重新声明，因此background-color: red !important; background-color: blue;会使背景颜色变成红色，即使您告诉它是蓝色。

- Blender

请记住，这只是一种检查background: white是否被覆盖的方法。每次CSS属性在某个地方被覆盖时都开始使用!important是不好的做法。更好的方法是（在使用!important确定问题后）找出它被覆盖的确切位置，然后修复它。 - Stephan Muller

我发了这个帖子只是为了测试一下是否有效（以及作者是否在其他地方使用了!important）。如果我可以访问问题页面，我可以轻松使用Chrome Inspector告诉你哪个规则正在覆盖背景颜色并且它在哪里，只需要几秒钟。但是由于我无法看到该页面，所以无能为力。 - Blender

我知道，我只是在补充你的答案，我甚至点了赞。只是想指出给Donald Jenkins知道这不是一个永久性的解决方案，只是一种调试方法 :) - Stephan Muller

@Blender：谢谢您的建议！我已经尝试过，但正如Stephan所提到的那样，我不喜欢使用它。但它没有起作用。 - Donald Jenkins

他的建议完全奏效，我立即将其标记为已接受：非常感谢你们两位。 - Donald Jenkins

2

我认为background:#FFFFFF;可以解决这个问题。对我起作用了。

- Krishna

0

Internet Explorer支持6位颜色代码，即使用#ffffff代替#fff。希望您能理解这个。

- MFarooqi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephan Muller · Accepted Answer

问题出在你的CSS代码中的以下属性：

:focus{
  outline:0;
  background-color:#f2f3f6;
  border-color:#996
}

显然，在加载IE8时，它会决定html元素具有焦点，而其他浏览器不会这样做。在此删除背景颜色属性，所有内容都将保持为白色。