Question

我有一个网站，该网站的chrome浏览器效果很好，但在Firefox中效果不佳。

这是Chrome：

这是Firefox：

缺少四个主图像中的三个-尽管代码相同，但奇怪的是第四个图像显示良好。检查器显示图像已成功下载：

我也清除了缓存，更新了Firefox等，但无济于事。

针对查询：

所有图像均来自数字海洋，而不是本地。

这是学习图像和微笑图像的css和html，其中微笑图像显示在FF中，而学习按钮没有：

CSS

    .four_box {
        position: absolute;
    }

    .four_btn {
        cursor: pointer;
        transition: all .7s;
    }

    .four_label_anchor {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        pointer-events: none;
    }

    .smile_size {
        height: 262px;
        width: 326px;
    }

    .learn_size {
        height: 263px;
        width: 183px;
    }

HTML

<div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;">
    <img id="learn_btn" class="learn_size four_btn" style="
     background: url(/static/img/swirl_home/chalk-btn.png);"
     onclick="animHome(this.id);">

    <div class="learn_size four_label_anchor">
        <div id="learn_label" class="four_label">Learn</div>
            <button id="learn_return" class="btn_href return_btn">
                return
            </button>
        </div>
    </div>
 </div>

<div id="smile" class="smile_size four_box" style="top: 438px; left:     954px;">

   <img id="smile_btn" class="smile_size center four_btn" style="
        background: url(/static/img/swirl_home/bird-btn.png);"
        onclick="animHome(this.id); homeSnapshots();">

   <div class="smile_size four_label_anchor">

       <div id="smile_label" class="four_label">Smile</div>
            <button id="smile_return" class="btn_href return_btn">
                return
            </button>

       </div>
 </div>

我将重新阅读Firefox链接

Answer 1

如果要显示本地图像，可能是问题所在。

在图像URL中使用/代替\将解决问题

否则，Mozilla对于此问题有一个常规的帮助页面：https://support.mozilla.org/en-US/kb/fix-problems-images-not-show

在除Firefox之外的所有浏览器中显示图像

1 个答案: