jQuery - 我的代碼似乎不適用於所有瀏覽器

Question

我有這個代碼：

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

這個的CSS是：

.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代碼：

<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/