Firefox 无法识别 img 类标签答案

【问题标题】：img class tags not being recognized in firefoxFirefox 无法识别 img 类标签
【发布时间】：2013-05-13 20:54:18
【问题描述】：

所以我正在运行一个社交网站，我在其中安装了插件和模块，允许用户通过拥有自己的 CSS 编辑器（样式框）来编辑他们的粉丝页面，这是用于社交引擎的。

我最初有一个主菜单，其中包含链接图像，但通过 html src vs css 引用即<img src=""> vs .div { code } 为了允许用户通过 CSS 更改布局，我为每个图像创建了类，以便它们可以被覆盖。

为此，我偶然发现了一篇关于 stackoverflow 的文章（我没有链接），其中介绍了如何使用 CSS 更改图像，这导致我使用 <img class=""/> 并使用

.customtag {
content:url("http://pathtoimage");  }

为了修改它。

它在 chrome 和 IE 中显示得很好，但在 Firefox 中它根本没有注册，我看到的只是文本 + alt="" 标签的描述。

我已经搜索了几个小时，但找不到与此完全匹配的内容。所以我在这里发布这个，看看是否有人可以引导我走向正确的方向。我也尝试过声明 !DOCTYPE 以及使用 <style> vs <style type="text/css">

虽然使用 css 验证器会显示其他区域，但与当前代码行无关的原因是它不呈现的原因。在萤火虫中，它似乎根本没有显示 CSS 注册。

非常感谢任何帮助。

我已从我的站点中删除了菜单代码，并将其放入上述链接中的单独 html 文件中，以找出我的问题。非常感谢任何帮助，或者为我指明正确的方向。感谢您抽出宝贵时间阅读。

【问题讨论】：

stackoverflow.com/questions/12262118/…
嗨@kufudo，如果我正确理解你的链接，它说它在Firefox中根本不支持并且没有解决方法？我不确定它指的是什么<img> 元素描述。我通过 HTML 调用它，问题是图像没有显示出来。我知道内容在 Firefox 中不起作用，这是否意味着没有完整的解决方法？对不起，如果我没有正确理解它。
终于为遇到同样问题的人找到了解决方法。使用background:url(); vs content:url(); 解决了这个问题，因为它的跨浏览器兼容。

【解决方案1】：

由于 Firefox 不完全理解或理解 content: url();，因为它期望来自 <img class=""/> 的图像，因此您需要使用 background: url();，因为这在所有浏览器中都被接受。

即

.someimageclass { background: url(pathtoimage); }

这将导致 firefox 加载图像，但由于它正在寻找 <img class=""/>" 中指定的原始图像，因此它周围会有一个黑色边框。

要制定解决方法，请创建或在 Google 上搜索 1x x 1px 的“blank.gif”并将 img 类编辑为

<img class="someimageclass" alt="" src="blank.gif"/>

现在该框将消失，这将是您的解决方法。

希望这可以帮助那些为此发疯的其他人。

【讨论】：