Html 内容属性在Firefox中不起作用，但在chrome中起作用？

因此，我正在努力使我的页面更具响应性，就像我在Chrome中所希望的那样，但是我尝试用Firefox打开它，它只是不显示图像。 我试着将content属性改为background，但也没用。 是什么导致页面中出现这种行为？我如何让它在firefox上工作

html{
背景:#212121 ;；
}
.包装纸{
利润率最高：15%；
显示器：flex；
对齐内容：居中；/*将元素居中*/
柔性包裹：包裹；/*当它们不能放在一行中时，将它们置于彼此上方*/
}
.divWrapper{
背景图片：url（“/images/gear.png”）；
高度：600px；
宽度：250px；
利润率：5%；
}
1.车头停车场{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/3/35/Head_slot.png/revision/latest?cb=20130227123039");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：25%；
}
.领口{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/b/b4/Neck_slot.png/revision/latest?cb=20130227122801");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
.箭头槽{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/6/64/Ammo_slot.png/revision/latest?cb=20130227122436");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
卡佩斯洛先生{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/b/ba/Cape_slot.png/revision/latest?cb=20130227182819");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
.切斯特槽{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/3/33/Torso_slot.png/revision/latest?cb=20130227120231");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
豪斯洛特先生{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/d/d1/Weapon_slot.png/revision/latest?cb=20130227121007");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
.屏蔽槽{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/d/d9/Shield_slot.png/revision/latest?cb=20130227123309");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
legSlot先生{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/2/25/Legs_slot.png/revision/latest?cb=20130227123853");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
feetSlot先生{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/b/b0/Boots_slot.png/revision/latest?cb=20130227123356");
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
}
格洛维斯洛先生{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/6/69/Gloves_slot.png/revision/latest?cb=20130227123502");
宽度：45px；
高度：45px；
}
.ringSlot{
内容：url（“https://vignette.wikia.nocookie.net/2007scape/images/9/9f/Ring_slot.png/revision/latest?cb=20130227123624");
宽度：45px；
高度：45px；
}
.主要项目{
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.中间项目{
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
.底部项目{
宽度：45px；
高度：45px；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
}
@仅介质屏幕和（最大宽度：180px）{
.主要项目{
宽度：45px；
高度：自动；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
柔性包装：包装；
}
.中间项目{
宽度：45px；
高度：自动；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
柔性包装：包装；
}
.底部项目{
宽度：45px；
高度：自动；
左边距：自动；
右边距：自动；
利润率最高：2%；
显示器：flex；
弯曲方向：行；
证明内容：中心；
柔性包装：包装；
}
}

学问

根据MDN，

内容

仅用于伪元素（

:before

和

:before

）：

适用于

：：在

之前和

：：在

伪元素之后

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

适用于：所有元素、符合树的伪元素和页边距框

第二次编辑：此功能非常新，即使caniuse上也没有任何内容：

CSS为伪元素生成的内容

---

不要使用

section

元素，而是使用实际的伪元素，这样

content

元素就可以工作了。我不太明白，不是在我的HTML中使用

section

元素，而是要在我的HTML中使用伪元素吗？好的，那么我就