HTML浏览器图像兼容性

Question

以下内容适用于Chrome浏览器，但出于某些原因无法进行Internet浏览？在Internet浏览器中，该图像根本没有出现，只留下了通常带有卸载图像的带有X的小盒子。

https://drive.google.com/open?id=1g_bnj37sHwEyq1a7ysCHIs8N-UwcSdaY https://drive.google.com/open?id=1GVP7J8yGCpqe_w3FRMNo4_oPStflh3jH

<div>
<img style="z-index: -1; position: absolute; margin-left:450px" 
src="images/penguin.gif">
<p style="color:#ff0000; text-align: center;">
</br>
</br>
</br>
This is text that</br>
appears over the image</br>
of a penguin.
</p>
</div>

有人知道为什么吗？

Answer 1

您的图像文件是gif。Internet Explorer不完全支持Gif图像： https://support.microsoft.com/en-us/help/3004241/animated-gif-file-is-not-displayed-completely-in-internet-explorer-11

  

假定您清除Internet Explorer 11的“ Internet选项”对话框中“高级”选项卡上的“在网页中播放动画”选项，当您查看包含动画GIF文件的网站时，不会显示动画GIF文件。应该显示动画GIF文件的第一帧的静态图像。

  

要解决此问题，请为Internet Explorer安装最新的累积安全更新。为此，请转到Microsoft Update。此外，请参阅有关Internet Explorer最新累积安全更新的技术信息。

另请参见以下答案：https://stackoverflow.com/a/25674671

问题：

  

我已经创建了一些动画的.gif文件，它们在Firefox和Chrome浏览器中效果很好，但在IE 10中效果不佳。是否可以解决此问题？只需尝试在各种浏览器中查看以下图片即可。

答案

  

据我所知，问题不在于您的页面或GIF动画本身。这是客户端上IE10（和其他版本）中的设置。您可以从IE的设置中访问该设置

     

Internet选项→高级→多媒体→播放动画

     

选中此框将产生所需的结果。

     

但是我听到下一个问题：是否可以检测用户是否选中了此框？

     

不幸的是，我找不到自动检测这种情况的方法。 ：-（

     

我想您可以让用户完成设置过程（有点像观看高清电影时可以访问的音频/视频设置屏幕），但这似乎很笨拙。

     

我还检查了Modernizr可能会有所帮助，但似乎没有帮助。 Modernizr可以检测CSS3动画是否在播放中，但似乎与IE中的此设置无关。

     

笨蛋。

     

SO不用多说，但是如果有人知道或找到检测GIF动画能力的方法，请让我们所有人知道！