Question

.googlePic{
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

这是我的googlePic文件中的班级css的示例。它可以在google chrome和safari上很好地打印出来。但是，它不适用于firefox。 Nth被打印出来。请帮助：）

Answer 1

content属性适用于::before和::after。

googlePic::before
{
 content: url('../../img/googlePlusIcon.PNG');
}

阅读本文： http://www.htmldog.com/reference/cssproperties/content/

如果指定了！DOCTYPE，IE8仅支持content属性。

Answer 2

我知道这可能是一个迟到的回应，但我遇到了同样的问题。

我查了一下，不知何故，网址不是有效的内容＆＃39;类型甚至是Chrome和Safari都是好人并且很好地展示它。

对我有用的是创造一个空洞的内容＆＃39;并使用背景显示图像：它适用于Chrome，Firefox，Safari和IE8 + 9

.googlePic:before {
    content: '';
    background: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;
}

编辑：忘了把：放在classname之后

Answer 3

你必须以风格

编写两个css类

.googlePic
{  /*this for crome browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

.googlePic: after
{  /*this for firefox browser*/
    content: url('../../img/googlePlusIcon.PNG');
    margin-top: -6.5%;
    padding-right: 53px;
    float:right;
    height: 19px;

}

它的作用对我来说：）

Answer 4

在所有Web浏览器中处理图像的最佳方法是使用background-css属性和background-size。但是，IE8及更低版本不支持(represent 2% of viewer in 2014)

.googlePic{
    background: url('../../img/googlePlusIcon.PNG') -6.5% 53px no-repeat;
    background-size: contain;
    float:right;
    height: 19px;
}

Answer 5

如果将标签更改为div而不是img，则内容应在firefox中工作。

Answer 6

这救了我。请务必从alt中删除img属性，否则您会在Firefox中找到alt和实际图片。

   .googlePic, .googlePic:after{
        content: url('../../img/googlePlusIcon.PNG');
        margin-top: -6.5%;
        padding-right: 53px;
        float:right;
        height: 19px;
    }

Answer 7

我只是添加了'alt'并且它可以在不使用伪类的情况下使用

Answer 8

我最近遇到了同样的问题，上面没有一个解决方案适合我。我已经采取了以下解决方法。

我在我的项目中包含了Bootstrap并使用了它的img-responsive类。之后，我只需使用<img class="img-responsive">标记添加图片。它可以在每个浏览器和每个视口大小上显示和缩放。

希望这对某人有帮助。

Answer 9

我遇到了同样的问题，就我而言，我无法使用content：url（）显示图像。我想在一格中显示等待的gif。我不知道Mozilla支持的详细信息。但就我而言，可以通过以下代码解决。

background-img property with background-size: contain(compulsory)
.img_div{background-image: url("wait.gif");height: 20px;width: 20px;background-size: contain;border:none;}

它可以在Chrome 73和Firefox 66上运行。

Answer 10

将alt属性添加到img标记中，然后使用content="url('...')"将在Firefox中起作用。例如：

<img class="my-image" alt="myImage" />

.my-image {
  content: url("...");
  width: 10px;
  height: auto;
  display: inline-block;
}

Answer 11

以这种方式为我工作。必须先放置文件///，然后再放置URL。
文件/// C：/ user / s / desktop ....... jpg

Answer 12

您可以尝试将高度和宽度设置为0，添加填充并设置背景图像。你必须让它显示：阻止或显示：内联块，使高度生效。

以下是一个示例： http://jsfiddle.net/zBgHd/1/

内容网址不会在Firefox浏览器上显示图像

12 个答案: