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>