magnific popup 不显示在 FireFox 中的图像答案

【问题标题】：magnific popup does not show images in FireFoxmagnific popup 不显示在 FireFox 中的图像
【发布时间】：2014-05-17 12:32:38
【问题描述】：

我正在使用 Magnific Popup JQ 库在弹出式叠加层中显示画廊。这是基本代码：

<html>
<head>
<title>Ristna tuletorn. Маяк на острове, Эстония. - Gallery test</title>
<base href="http://ristnatuletorn.eu/" />
<link href="assets/css/magnific-popup.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.magnific-popup.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
    $('.open-popup-link').magnificPopup({
    type:'image',
    items: [
    {src:'/assets/gallery/1/11.JPG'},
    {src:'/assets/gallery/1/2.jpg'},
    {src:'/assets/gallery/1/1.jpg'},
    {src:'/assets/gallery/1/3.jpg'},
    {src:'/assets/gallery/1/4.jpg'},
    {src:'/assets/gallery/1/5.JPG'},
    {src:'/assets/gallery/1/6.jpg'},
    {src:'/assets/gallery/1/7.JPG'},
    {src:'/assets/gallery/1/8.JPG'},
    {src:'/assets/gallery/1/9.jpg'},
    {src:'/assets/gallery/1/10.JPG'},
    {src:'/assets/gallery/1/12.JPG'},
    {src:'/assets/gallery/1/13.JPG'},
    {src:'/assets/gallery/1/14.JPG'},
    {src:'/assets/gallery/1/15.JPG'},
 ],             
                          gallery: {
                             enabled: true
                                    }
        });
    });

</script>
<link rel="stylesheet" href="/assets/components/gallery/css/web.css" type="text/css" />
</head>
<body>
<a href="#test-popup" class="open-popup-link">Show inline popup</a>

</body>
</html>

它不会在 FF 浏览器（Windows 和 Ubuntu）中显示图像。在 Chrome 中它工作正常。这是直播页面的链接：http://ristnatuletorn.eu/index.php?id=8

任何人都可以提出任何解决方案吗？

谢谢！

【问题讨论】：

标签： javascript jquery firefox magnific-popup

【解决方案1】：

我知道这有点晚了，但是由于从未发布过答案...尝试声明 DOCTYPE。我有同样的问题，这为我解决了这个问题。很可能您的官方网站声明了 DOCTYPE 而您的测试代码没有声明。

【讨论】：

这真的救了我！
谢谢！我没有声明我的 doctype，也无法弄清楚出了什么问题，因为我从 JSP 转移到了常规 HTML 并且忘记了复制 doctype。你是一个真正的救星！

【解决方案2】：

如果您从 <img> 中删除 max-height CSS 属性，它会起作用。

max-height: 36px; 的集合太小了，如果你进入控制台并调试它，看看会发生什么，因为你上去说 100 像素。

你以某种方式专门为 FF 设置了这个，因为在 Chrome 中它是 633 像素。

干杯

【讨论】：

Fonzy 感谢您的快速帮助！如何更好地解决这个问题？因为这个值在 Magnific 代码中的某个地方设置，我不想调整这个库的核心。
我没有有效的答案，但您可以尝试以下方法：在元素的 css 中使用 !important 设置高度并查看它是否覆盖（您可以使用 css pretags只让它在FF中发生）。您还可以使用 JS/JQ 检查高度是否太小，如果您的画廊是静态的，则应用自定义高度。但是 TBH 应该有一种方法来实现它，以便它默认工作 - 我用谷歌搜索了一下，从来没有遇到过这个问题！可爱的网站顺便说一句！干杯
再次感谢您的帮助和想法！库中有回调函数。我可以用它来用 JS 固定高度。但在官方网站上，FF 一切正常。这让我很惊讶。最后我放弃并切换到另一个画廊插件。

【解决方案3】：

我尝试了一些方法，但不再响应。只是使用了固定的弹出窗口大小。

注释掉以下@ Line 1210。 item.img.css('max-height', mfp.wH-decr);

希望这会有所帮助！

干杯！

【讨论】：