javascript - Chrome 忽略动态更改元素的相对定位

Question

我想在单击 div 时在其中间显示加载图像。但在 Chrome 中，图像出现在左上角。它只发生在动态内容上。图像在 Firefox 中的位置正确。

http://jsfiddle.net/uGC25/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
    .inner_text {
        position: relative;
        top:45%;
    }
    .loading_img {
        position: relative;
        top:30%;
    }
    .plan_div {
        border: solid 1px;
        cursor: pointer;
        width:420px;
        height:243px;
    }
</style>
<div class='plan_div'>
    <img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif" />
</div>
<div class='plan_div'>
    <div class='inner_text'>Click to generate graph.</div>
</div>
<script>
    function start_loading() {
        $(this).html('<img class="loading_img" src="http://cdn.jsdelivr.net/wp-advanced-ajax-page-loader/2.5.12/loaders/Atom%20Loading.gif">');
    }
    $(document).on('click', '.plan_div', start_loading);
</script>

Answer 1

如果位置是绝对

使用上、左、右、下

当位置是相对

使用 margin-top、margin-left、margin-right 和 margin-bottom

.inner_text { position: relative; margin-top:25%; }
.loading_img { position: relative; margin-top:20%;  }

DEMO (两个浏览器都可以正常工作)