html - gif が表示されていないときに読み込まれると Chrome に表示されない

Question

ajax でフォームを読み込んでいますが、このフォームには送信ボタンがあります。そのボタンを押すと、ボタンが消え、フォームが送信されている間のプロセスを示す gif が表示されます。フォームが AJAX で読み込まれている場合、gif は表示されません。

問題は、送信ボタンを押しても gif が表示されないことです。Chrome Dev Tools にアクセスして css を確認すると、すべて正しく、gif に属する css プロパティにチェックマークを付けてオンにすると、突然表示されます。Chromeはサーバー上でそれを見つけることができるため、レンダリングされていないようです.

これは gif の css です。

.form_wrapper .loading_gif {
    background: url("../images/loader_blue.gif") no-repeat;
    width: 32px;
    height: 32px;
    vertical-align: middle;
}

FFで完璧に動作します。

これは、divを保持するhtmlです。

<div class="application_submited" id="application_submited">
    <div class="center">
        <div class="loading_gif"></div>
        <span>For submitting. Please wait.</span>
    </div>
</div>

の CSS .center:

.center {
    text-align: center;
    margin: 0px auto;
    width: 90%;
    line-height: 45px;
    height: 45px;
}

追加しまし.centerた。gif の Z-idex は役に立ちません。本当に奇妙です。他のgifに切り替えると機能しますが、これを使用すると表示されません。