image - 出现在所有浏览器中的图像，但 Firefox

Question

我有一个网站在 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