.googlePic{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
这是我css 文件中我的班级googlePic 的一个示例。它可以在google chrome 和safari 上很好地打印出来。但是，它不适用于firefox。 Nth 被打印出来。请帮忙:)
【问题讨论】：
content 属性适用于 ::before 和 ::after。
googlePic::before
{
content: url('../../img/googlePlusIcon.PNG');
}
阅读： http://www.htmldog.com/reference/cssproperties/content/
如果指定了 !DOCTYPE，IE8 仅支持 content 属性。
【讨论】：
你必须写两个样式的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;
}
它对我有用:)
【讨论】：
.googlePic:after { /*this for firefox browser*/ content: url('../../img/googlePlusIcon.PNG'); margin-top: -6.5%; padding-right: 53px; float:right; height: 19px; }之后的空格
我知道这可能是迟到的回应，但我遇到了同样的问题。
我查了一下，不知何故，一个 url 不是有效的“内容”类型，即使 Chrome 和 Safari 都是好人，并且很好地展示了它。
对我有用的是创建一个空的“内容”并使用背景显示图像： 它在 Chrome、Firefox、Safari 和 IE8+9 中运行良好
.googlePic:before {
content: '';
background: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
编辑：忘记把 :before 放在类名之后
【讨论】：
在所有 Web 浏览器中处理图像的最佳方法是使用带有 background-size 的背景 css 属性。 但是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;
}
【讨论】：
您可以尝试将高度和宽度设置为 0，添加填充并设置背景图像。您必须将其设置为 display: block 或 display: inline-block 才能使高度生效。
这里是一个例子： http://jsfiddle.net/zBgHd/1/
【讨论】：
我最近遇到了同样的问题，上面的解决方案都不适合我。我采用了以下解决方法。
我在我的项目中加入了 Bootstrap 并使用了它的 img-responsive 类。
之后，我只需使用<img class="img-responsive"> 标签包含图像。它可以在每个浏览器和每个视口大小上完美显示和缩放。
希望这对某人有所帮助。
【讨论】：
这救了我。请记住从img 中删除alt 属性，否则您将在Firefox 中找到alt 和实际图像。
.googlePic, .googlePic:after{
content: url('../../img/googlePlusIcon.PNG');
margin-top: -6.5%;
padding-right: 53px;
float:right;
height: 19px;
}
【讨论】：
我遇到了同样的问题，在我的情况下，我无法使用 content:url() 显示图像。我想在一个 div 中显示等待的 gif。我不知道 Mozilla 支持的详细信息。但在我的情况下，它可以通过以下代码解决。
.img_div{
background-image: url("wait.gif");
height: 20px;
width: 20px;
background-size: contain;
border: none;
}
它适用于 Chrome 73 和 Firefox 66。
【讨论】：
如果您将标签更改为 div 而不是 img ，内容应该可以在 firefox 中使用。
【讨论】：
以这种方式为我工作。必须先放置文件///，然后再放置 url。
文件///C:/user/s/desktop.......jpg
【讨论】：
将alt 属性添加到img 标记然后使用content="url('...')" 将在Firefox 中工作。例如：
<img class="my-image" alt="myImage" />
.my-image {
content: url("...");
width: 10px;
height: auto;
display: inline-block;
}
【讨论】：
我只是添加了“alt”，它在不使用伪类的情况下工作
【讨论】：