内容 url 在 Firefox 浏览器上不显示图像

Posted 2023-03-06

【中文标题】内容 url 在 Firefox 浏览器上不显示图像

【英文标题】：Content url does not display image on firefox browser

【发布时间】：2013-07-28 06:52:36

【问题描述】：

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

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

【问题讨论】：

我认为您不能那样使用“内容”。请改用“背景”。

检查是否有帮助：***.com/questions/12262118/…

在 中添加 alt 对我有用

【参考方案1】：

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

googlePic::before

 content: url('../../img/googlePlusIcon.PNG');

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

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

【讨论】：

在 Firefox 中，:before 对我不起作用，但 :after 对我有用，正如 Ahetesum Ali 所报告的那样

【参考方案2】：

你必须写两个样式的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;

它对我有用:)

【讨论】：

对我来说没什么。 Firefox 和 IE - 没有反应

在我的例子中：after伪元素让Firefox渲染，但不是：before

我不是 css 的专家，只是发现上面的答案后来改变了之前到之后的工作

这不起作用后还有什么可以尝试的吗？

之后对我有用。小心，删除：.googlePic:after /*this for firefox browser*/ content: url('../../img/googlePlusIcon.PNG'); margin-top: -6.5%; padding-right: 53px; float:right; height: 19px; 之后的空格

【参考方案3】：

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

我查了一下，不知何故，一个 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 放在类名之后

【讨论】：

这是解决方案，应标记为答案。出于某种原因，某些浏览器不接受 url 作为内容。

这不起作用后还有什么可以尝试的吗？

【参考方案4】：

在所有 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;

【参考方案5】：

您可以尝试将高度和宽度设置为 0，添加填充并设置背景图像。您必须将其设置为 display: block 或 display: inline-block 才能使高度生效。

这里是一个例子： http://jsfiddle.net/zBgHd/1/

【讨论】：

请将外部托管代码编辑到帖子中；这样做将确保即使链接断开，它仍然有用。我的脚本 is not allowed to do this 因为潜在的许可问题。

【参考方案6】：

我最近遇到了同样的问题，上面的解决方案都不适合我。我采用了以下解决方法。

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

希望这对某人有所帮助。

【参考方案7】：

这救了我。请记住从img 中删除alt 属性，否则您将在Firefox 中找到alt 和实际图像。

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

【参考方案8】：

我遇到了同样的问题，在我的情况下，我无法使用 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。

【参考方案9】：

如果您将标签更改为 div 而不是 img ，内容应该可以在 firefox 中使用。

【参考方案10】：

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

【讨论】：

背景图片：url(file///C:/user/s/desktop.......jpg)

【参考方案11】：

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

<img class="my-image"  />

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

【讨论】：

这样做会导致图像在 Chrome 中看起来更大。

【参考方案12】：

我只是添加了“alt”，它在不使用伪类的情况下工作

【讨论】：

哇！太疯狂了。这也为我修复了它。我对解决方案如此简单感到敬畏。大眼睛。

这对我也有用！