IE 7 / 怪癖模式和背景颜色？

Question

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

我有一个正在开发的实用程序。它主要是 JavaScript，它有一个显示在页面上的小型浮动 DIV 用户界面。到目前为止，标准的东西。问题是 UI 中某些 DIV 的背景颜色。颜色是由 CSS 分配的，而且（厌烦了：）它在 Firefox、Chrome 和 Opera 中看起来不错，但当然 IE 很难。

背景在 IE 中在 quirks 模式或 IE7 模式下不显示，但在 IE8 模式下会显示。对于我的生活，我似乎无法弄清楚为什么 IE7 不显示背景。

您可以看到违规代码的页面在这里：Log Hound Demo。浮动 DIV 位于右上角 - 单击“V”将其打开。

在 IE 中查看该页面，然后在 [地球上的任何其他浏览器] 中查看该页面会很容易地向您显示缺少的背景颜色。我发誓，即使是 Lynx 也能做得更好……咳咳。有问题的 DIV ID 是 lhPlateHead、lhPlateCtrlPanel、lhPlateTagPanel - 至少使用 Firebug 很容易找到。他们应该注意背景颜色为#DFEAF8 的 .lhPlateColor 类，但从未应用该颜色。

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

如果有人无聊到可以看一看并弄清楚一些事情，我将非常感激。

Answer 1

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

问题的情况是：

1. 您正在以编程方式创建元素：
   myelmt = document.createElement('DIV')
2. 您正在以编程方式设置该元素的样式：
   myelmt.setAttribute('class', 'myclass');
3. 然后您以编程方式将该元素添加到 DOM：
   body.appendChild(myelmt);
4. 您使用的是 IE。
5. 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;
}

希望这对你有用。