jQueryの私のコードは、すべてのブラウザ間で動作するように表示されません

Question

私はこのコードを持っている：

.overlay{ 
      clear: both; 
      width: 100%; 
      height:100%; 
      z-index:600; 
      position:absolute; 
      background: url('../images/overlay.jpg'); 
      background-repeat: repeat; 
      opacity:0.65; 
      filter:alpha(opacity=65); /* For IE8 and earlier */ 
      display:none; 
} 

.loader{ 
    z-index:1000; 
    position: absolute; 
    display: none; 
} 

そして、ここに私の関連するHTMLコードです：

function displayLoader(toggle){ 
    if(toggle === 'show'){ 
     $('.overlay, .loader').css({ 
      'z-index'  : '1000', 
      'display'  : 'inline' 
     }); 
    } else { 
     $('.overlay, .loader').css({ 
      'display':'none' 
     }); 
    } 
} 

し、このためのCSSは次のとおりです。

<div class="overlay"> 
     <div id="horizon"> 
      <img src="../images/ajax-loader.gif" alt="Loading... Please wait." class="loader"/><br /> 
      <p class="loader">Loading... Please be patient.</p> 
     </div> 
</div> 

displayLoader（ 'show'）を呼び出すとうまく動作します。 FireFoxを使用していても、IE7 +、Chrome、Safariを使用しようとするとすぐに何も表示されません。

私のCSSはおそらくあなたの目に見えるように非常に悪いです。

これについての助力は素晴らしいことです。

ありがとうございます！

Answer 1

私はフィドルを作った。 IEでうまく動作しているようです。何か不足していますか？

http://jsfiddle.net/3aLgY/4/