Question

这将是一个模糊而模糊的问题，这可能是因为即使使用IE Web Developer，我也不知道发生了什么。

我有一个我正在研究的实用工具。它主要是JavaScript，它有一个小的浮动DIV用户界面，显示在页面上。到目前为止，标准的东西。问题是UI中某些DIV的背景颜色。颜色是由CSS分配的，并且（疲惫不堪）它在Firefox，Chrome和Opera中看起来很好，但当然IE很难。

在怪癖模式或IE7模式下，后台不会出现在IE中，但在IE8模式下也是如此。对于我的生活，我似乎无法弄清楚为什么IE7没有显示背景。

您可以在此处看到有问题的代码的页面：Log Hound Demo。浮动DIV位于右上角 - 单击“V”将其打开。

在IE中查看该页面，然后在[地球上的任何其他浏览器]中查看将足够容易地显示缺少的背景颜色。我发誓，即使是Lynx也会让它变得更好......唉。有问题的DIV ID是lhPlateHead，lhPlateCtrlPanel，lhPlateTagPanel - 至少很容易找到Firebug。他们应该注意背景颜色为＃DFEAF8的.lhPlateColor类，但该颜色永远不会应用。

随着IE web开发人员的到来，我尝试删除CSS类并重新添加它们。我尝试了浏览器和文档模式的每种组合 - 再次，在IE8文档模式下只有IE8浏览器模式的背景颜色有效。

如果有人厌倦了看看并想出一些事情，我会非常感激。

Answer 1

嗯 - 我终于明白了，就我而言，这是IE总是很糟糕的另一个原因。

问题的实际情况是：

您正在以编程方式创建元素：
myelmt = document.createElement('DIV')
您正在以编程方式设置该元素的样式：
myelmt.setAttribute('class', 'myclass');
然后，您以编程方式将该元素添加到DOM：
body.appendChild(myelmt);
您正在使用IE。
IE恨你。

在这种情况下，IE8将尊重“myclass”css，并在将元素添加到DOM时正确设置元素的样式。 IE7和我在下面猜测会破坏CSS样式，让你觉得麦当劳的就业压力可能要小得多。

回顾一下不耐烦的人：

适用于IE8和星球上的其他浏览器

var myelmt= document.createElement('DIV');
myelmt.setAttribute('class', 'myclass');
body.appendChild(myelmt);

适用于IE7及以下版本：

var myelmt= document.createElement('DIV');
var attr = document.createAttribute('class');
attr.value = 'myclass';
myelmt.setAttributeNode(attr);
body.appendChild(myelmt);

如果有人可以详细说明为什么这对IE7来说是一个问题，请随意，因为我陶醉于细枝末节。否则，请记住，在有人丢失对象引用之前，这一切都很有趣。

Answer 2

尝试将zoom:1添加到背景颜色不起作用的任何元素上。

Answer 3

我认为这个问题与IE绘制表格单元格的方式有关。尝试加入仅IE的CSS规则，将背景颜色明确应用于TD。像这样：

.lhWarnMsg .logMsg td
{
 * background-color: #fbffbf;
}

希望这对你有用。

IE 7 / Quirks模式和背景颜色？

3 个答案: