在 Chrome、IE 和 Firefox 中显示不同答案

【问题标题】：Displaying differently in Chrome, IE and Firefox在 Chrome、IE 和 Firefox 中显示不同
【发布时间】：2015-08-13 17:37:19
【问题描述】：

这是我第一次用 JS 大量修改 Bootstrap3 框架（我只是稍微熟悉一下），所以我很困惑为什么我即将推出的网站上的某些元素（如轮播）是显示不同或根本不显示。

具体来说，我的背景图像和弹出式滑块在 Chrome 中运行良好，但在 Firefox 中我的页面的Target Species 部分无法呈现，尤其是所有问题。

然后是Video thumbnails on the Media page，它在 Chrome 上也能很好地显示，但在 Firefox 和 IE 上都不能工作！

我在一家非营利组织工作，我们无法接触到任何其他技术专家，因此我们非常非常感谢人们提供的任何帮助或建议！谢谢大家的时间！

【问题讨论】：

如果您检查 Web 控制台，您将收到一条特定的错误消息：TypeError: $(...).raccordion is not a function。我会尝试$(document).ready 而不是使用$(window).load
谢谢ahoffner——我试过了，但似乎没有什么不同。背景图片和弹出式滑块实际上是 CSS 驱动的，而不是 JS，这使得这更加令人困惑。
所以，我发现媒体页面上视频部分缩略图的问题在于我链接到的文件类型。 Chrome 将其识别为图像文件，但 Firefox 和 IE 没有。用同一张图片的 PNG 版本替换这些缩略图解决了这部分问题！
啊哈！另一个发现，看起来添加 '-moz-transition' 已经修复了上滑问题。现在，问题来了……为什么不显示带有背景图像样式的“img”？ :P
其实，既然我已经弄清楚了其他问题是什么，我将就这一问题打开一个新问题...感谢大家的关注！

【解决方案1】：

上述 cmets 中反复试验的 TL:DR：

在 CSS 中添加 -moz-transition 会激活 Target Species 页面上的 CSS 悬停功能。将 display:block 添加到 img CSS 会强制呈现空的 img。

IE 和 Firefox 无法识别我试图链接的图像文件的类型。上传并链接到同一文件的 .PNG 版本解决了该问题。

哒哒哒！

【讨论】：