css html - DIV和img不顯示在Firefox上，Safari上的位置不正確

Question

所以我加載了一個加載gif來覆蓋我的iframe加載時，然後在加載時消失。它的效果很好，但是在firefox上，加載GIF並不在那裏和Safari上，它的顯示方式在右邊。

 #loodImg { 
    position: absolute; 
    z-index: 999; 
} 
@media screen and (max-device-width: 500px) { 
    #loodImg img { 
     min-width: 100%; 
     min-height: 100%; 
     margin-left: 4% 
    } 
    #loodImg img { 
     display: table; 
     min-width: 100%; 
     min-height: 100%; 
     margin-left: 4% 
    } 
} 
@media (min-width: 700px) { 
    #loodImg img { 
     min-width: 70%; 
     min-height: 70%; 
     margin-left: 130% 
    } 
    #loodImg img { 
     display: table; 
     min-width: 70%; 
     min-height: 70%; 
     margin-left: 130% 
    } 
} 

這裏的HTML

<div id="loodImg"> 
    <div><img src="http://WEBSITELINKHERE/wp-content/uploads/2017/05/Loader-Icon.gif" /></div> 
</div> 
<iframe border=0 name=iframe src="/virtualtour.htm" width="100%" height="450" frameborder="0" onload="document.getElementById('loodImg').style.display='none';"></iframe> 

任何改進和修正，你可以幫助我做這更好的幫助。謝謝。請注意它在Chrome上完美運行。

Answer 1

請說明： 我測試了一些帶有giphy鏈接的代碼作爲佔位符，它似乎可以在firefox和safari中工作。 也許iframe加載速度很快？

 #loodImg { 
 
    position: absolute; 
 
    z-index: 999; 
 
} 
 
@media screen and (max-device-width: 500px) { 
 
    #loodImg img { 
 
     min-width: 100%; 
 
     min-height: 100%; 
 
     margin-left: 4% 
 
    } 
 
    #loodImg img { 
 
     display: table; 
 
     min-width: 100%; 
 
     min-height: 100%; 
 
     margin-left: 4% 
 
    } 
 
} 
 
@media (min-width: 700px) { 
 
    #loodImg img { 
 
     min-width: 70%; 
 
     min-height: 70%; 
 
     margin-left: 130% 
 
    } 
 
    #loodImg img { 
 
     display: table; 
 
     min-width: 70%; 
 
     min-height: 70%; 
 
     margin-left: 130% 
 
    } 
 
}

<div id="loodImg"> 
 
    <div><img src="https://media.giphy.com/media/3o7bukj6aXZuPqibpm/giphy.gif" /></div> 
 
</div> 
 
<iframe border=0 name=iframe src="https://giphy.com/gifs/bobs-burgers-funny-comedy-3ohzdEbR1FaSkFgp6o/links" width="100%" height="450" frameborder="0" onload="document.getElementById('loodImg').style.display='none';"></iframe>