Javascript DIV背景の問題

Question

私は現在、DIVの背景を変更するためにJavascriptを使用しているWebサイトを持っています。

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上で完璧に動作しますが、クロームのために失敗したところ私の問題が生じ、 FFとサファリ。

問題が何であるか、どのように私がこれを再現できるかについては、誰でも光を当てることができます。事前に

おかげ クリス

Answer 1

あなたは#mainscreen内部の一部のコンテンツを持っていると仮定するとは、最も可能性のある説明は、その親の高さを計算するときに、それが使用されていないので、その#mainscreenが浮いているが、そのあなたはDoctype（または全くDoctypeを持っていません）がInternet ExplorerでQuirksモードを引き起こすので、フロートがコンテナの底部を通らないようにします。

1. 標準モードをトリガーする文書型を追加
2. が#outerscreen

Answer 2

これはFF4とOpera10で仕事をする上でoverflow: hiddenを設定する（そうIEは他のブラウザとより一致となります）。 <div id="outerscreen">の高さと幅を指定するか、このエフェクトを表示するためにスクリーンの不動産を占めるコンテンツを内部に配置する必要があります。

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> 

のjavascriptを与える解決策がある：

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

あなたのスタイルを定義しましたあなたが変更したいときは、CSSの方が柔軟性があります。 コードの分離は常に良いです

Answer 4

私はこの問題が '

試してみてください。

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