Question

图片不会在Firefox中显示... Safari，Chrome，Opera OK。

但是，到处都有效吗？

<img class="headerImage centerImage" src="images/Broken_Heart.gif" alt="crying">

＆＃13;

.headerImage {
  width: 75%;
  height: auto;
  padding-bottom: 1.5em;
}

.brokenHeart {
  display: inline-block;
  width: 100%;
  content: url("../images/Broken_Heart.gif");
}

.weddingRings {
  display: none;
  width: 100%;
  content: url("../images/Wedding_Rings.gif");
}

.centerBlock {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<div class="headerImage centerBlock">
  <img class="brokenHeart" alt="">
  <img class="weddingRings" alt="">
</div>

＆＃13;

很奇怪，它只是在Firefox中......

在这里欣赏一些天才，因为我很短暂。

Answer 1

内容出现此错误，因此添加：之后应该为firefox做的技巧

.brokenHeart:after {
display: inline-block;

  width:   100%;

  content:  url("../images/Broken_Heart.gif");
}

.weddingRings:after {
  display: none;

   width:   100%;

   content: url("../images/Wedding_Rings.gif");
 }

Answer 2

以下是MDN Web文档中给出的内容属性的定义。

内容CSS属性与:: before和:: after一起使用   用于在元素中生成内容的伪元素。

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

在您的代码中，您尝试直接在HTML元素上的类选择器上应用content属性。 Firefox倾向于完全忽略这个属性。

.brokenHeart {
    display: inline-block;
    width:   100%;
    content:  url("../images/Broken_Heart.gif");
}

要使其在Mozilla中运行，您需要像这样修改CSS。

.brokenHeart {
    display: inline-block;
    width: 100%;
    content:  url("../images/Broken_Heart.gif");
}

.brokenHeart:after{
    content:  url("../images/Broken_Heart.gif");
}

将content属性保留在元素上（对于Chrome）并添加一个伪元素:after（对于Mozilla）。

Firefox中不显示图像

2 个答案: