html - content 属性在 Firefox 中不起作用，但在 chrome 中却起作用？

Question

所以我正在努力让我的页面响应更快，就像我在 Chrome 中想要的那样，但是我尝试用 Firefox 打开它，但它不显示图像。 我尝试将内容属性更改为背景，但这也不起作用。 是什么导致页面内出现这种行为？还有我如何让它适用于 Firefox？

html{
    background: #212121;
}
.wrapper {
    margin-top: 15%;
    display: flex;
    justify-content: center; /*center the element*/
    flex-wrap: wrap; /*make them above each other when they cannot fit in one row*/
  }
  
  .divWrapper {
    background-image: url("/images/gear.png");
    height: 600px;
    width: 250px;
    margin: 5%;
  }

  .headSlot{
      content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
      width: 45px;
      height: 45px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25%;
  }

  .neckSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.arrowSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.capeSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.chestSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.swordSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.shieldSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.legSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.feetSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
}

.gloveSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
    width: 45px;
    height: 45px;
}

.ringSlot{
    content: url("https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
    width: 45px;
    height: 45px;
}


.topItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.middleItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

.bottomItems{
    width: 45px;
    height: 45px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2%;
    display: flex;
    flex-direction: row;
    justify-content: center; 
}


@media only screen and (max-width: 180px){
    .topItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .middleItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }

    .bottomItems{
        width: 45px;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        margin-top: 2%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;

    }
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Learning</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />

</head>

<body>
    <div class="wrapper">
        <div class="divWrapper">
            <a href="#">
                <section class="headSlot">
                </section>
            </a>


            <div class="topItems">
                <a href="#">
                    <section class="capeSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="neckSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="arrowSlot">
                    </section>
                </a>
            </div>

            <div class="middleItems">
                <a href="#">
                    <section class="swordSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="chestSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="shieldSlot">
                    </section>
                </a>

            </div>


            <a href="#">
                <section class="legSlot">
                </section>
            </a>

            <div class="bottomItems">
                <a href="#">
                    <section class="gloveSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="feetSlot">
                    </section>
                </a>
                <a href="#">
                    <section class="ringSlot">
                    </section>
                </a>
            </div>
        </div>

        <div class="divWrapper">

        </div>
    </div>
    <script src="js/main.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>

</html>

Answer 1

根据 MDN，content 仅用于伪元素(::before 和 ::after):

Applies to ::before and ::after pseudo-elements

https://developer.mozilla.org/en-US/docs/Web/CSS/content

编辑:有趣的是，规范的当前工作草案(编辑草案，2018 年 9 月 26 日)说了一些不同的内容:

Applies to: all elements, tree-abiding pseudo-elements, and page margin boxes

https://drafts.csswg.org/css-content-3/#content-property

第二次编辑:这个功能太新了，甚至caniuse也没有任何东西:

CSS Generated content for pseudo-elements

https://caniuse.com/#feat=css-gencontent