Javascript DIV 背景问题答案

【问题标题】：Javascript DIV Background issueJavascript DIV 背景问题
【发布时间】：2011-05-18 16:42:14
【问题描述】：

我目前有一个网站，我在其中使用一些 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 上失败的地方。

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

提前致谢克里斯

【问题讨论】：

我怀疑其他浏览器不支持docEl = document.getElementById( 查询。您需要将 IE 识别为唯一具有不同访问方法的 IE。万岁
@ppumkin document.getElementById() 支持所有浏览器
为什么不能直接写doc.getElementById('outerscreen').style.backgroundImage =
编辑的宽度是多少？之前更有意义
在这里工作正常jsfiddle.net/net3Y

标签： javascript google-chrome safari html

【解决方案1】：

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

添加触发标准模式的Doctype（这样IE会和其他浏览器更加一致）
在#outerscreen 上设置overflow: hidden

【讨论】：

【解决方案2】：

这在 FF4 和 Opera10 中确实有效。您需要指定<div id="outerscreen"> 的高度和宽度，或者在其中包含一些占用屏幕空间的内容才能看到此效果。

【讨论】：

【解决方案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>

现在是javascript：

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

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

【讨论】：

【解决方案4】：

我认为问题出在'

尝试：

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

【讨论】：

' CSS 中 url 周围的字符只会在 IE5 for Mac 中引起问题。这似乎不太可能。