Javascript DIV 背景问题

Question

我目前有一个网站，我在其中使用一些 Javascript 来更改 DIV 的背景。

DIV 定义如下：

<td style="width: 750px; height: 300px; background-color: Black; border: 0px;">
   <div id="outerscreen">
            <div id="mainscreen">
            </div>
    </div>
</td>

我使用的 Javascript 如下：

var docEl = document.getElementById('outerscreen');
            docEl.style.backgroundImage = "url('pics/intro.gif')";

我的问题是这个函数在 IE 上完美运行，但在 Chrome、FF 和 Safari 上失败。

任何人都可以阐明问题是什么以及我如何解决这个问题。

提前致谢 克里斯

Answer 1

假设您在#mainscreen中有一些内容，最可能的解释是#mainscreen是浮动的，因此在计算其父级的高度时不使用它，但是您有一个触发的Doctype（或根本没有Doctype） Internet Explorer 中的 Quirks 模式，因此它不允许浮标从容器底部落下。

1. 添加触发标准模式的Doctype（这样IE将与其他浏览器更加一致）
2. 在#outerscreen上设置overflow：hidden

Answer 2

这在 FF4 和 Opera10 中有效。您需要指定

的高度和宽度，或者在其中包含一些占用屏幕空间的内容，才能使此效果可见。

Answer 3

虽然我不建议在布局中使用表格，但这里有一个解决方案，它效果更好，并且

<style type='text/css'>
   .outerCell {
     width: 750px; height: 300px; background-color: Black; border: 0px;
   }

   .outerScreen {
      background-image : url('pics/intro.gif');
      height: 300px;
   }
</style>

<td class='outerCell' >
   <div id="outerscreen">
            <div id="mainscreen">
            </div>
    </div>
</td>

现在可以为您提供更多控制权：

var docEl = document.getElementById('outerscreen');
 docEl.className = "outerScreen";

当您想要进行更改时，在 css 中定义样式会更灵活，
代码分离总是好的

Answer 4

我认为问题在于 '

尝试：

docEl.style.backgroundImage = "url(pics/intro.gif)";