为什么这个元素不能在 Firefox 中呈现？答案

【问题标题】：Why does this element not render in Firefox?为什么这个元素不能在 Firefox 中呈现？
【发布时间】：2013-12-09 18:29:12
【问题描述】：

以下 HTML/CSS 代码在 IE（版本 8）中呈现，但在 Firefox（版本 25）中不呈现

有什么原因吗？

HTML：

<img class="buttonmini" id="btn_Actual_Effort" onclick="showEffortDetail()"    disabled="disabled">

CSS：

.buttonmini
{
    background: url(../newimages/effort_calendar.gif) no-repeat;
    height: 16px;
    width: 16px;
    font-family: Verdana; /*font-size: 8pt;*/
    cursor: pointer;
}

【问题讨论】：

没有 src 属性的 img 标签怎么办？或者更好的问题，你为什么想要那个？
@sevenseacat 我相信 CSS 中的 background 属性涵盖了它。另外，这不是我的代码，所以我不知道为什么没有指定“src”属性。
如果这在其他浏览器中有效，我相信它是错误的。为什么不直接将 src 设置为要显示的图像，这样图像实际上没有样式就有意义？
@sevenseacat 这不是我的代码，所以我不确定你的问题的原因。
"我相信 CSS 中的背景属性可以覆盖它。"它没有。

标签： html css internet-explorer firefox web

【解决方案1】：

简答：

如果你在你的 css 中添加一个display: inline-block 可以修复它。

更长的答案：

它还在基于 Webkit 的浏览器（至少 Chrome 和 Safari）中呈现。

这似乎是因为 Firefox 不像其他浏览器那样解释图像标签。

<img> 标签是 w3 的 defined 作为内联块元素。

当图像的来源包含在标签中时（例如<img src="thisIsMyImage.jpg">），Firefox 会正确解释它（作为内联块元素）。
但是，当标签中没有立即可用的src 时，Firefox 似乎仅将其解释为内联元素。这意味着您无法定义它的宽度或高度。

查看this jsfiddle，了解一些不同的方法来显示<img> 标记的背景。

【讨论】：

@Enigmadan 实际上，这里的正确渲染（HTML 规范要求的渲染）是 Firefox，而不是 WebKit/IE。
@BorisZbarsky 啊。谢谢！你有正确性的来源吗？我阅读了几个版本的规范，但没有一个能真正按照我的喜好解释 img 的显示类型。
@Enigmadan lists.w3.org/Archives/Public/public-webapps/2013OctDec/… 有相关的规范链接和引用。

【解决方案2】：

在img 元素中，src 属性是 HTML 规范所必需的。如果省略它，则元素的呈现和行为是未定义的。（它可能会以您想要的方式与某些浏览器一起使用，并且您可能会欺骗其他一些浏览器也这样做，但任何新版本的浏览器都可能会破坏。）

因此，请使用内容图像（具有src 属性和足够alt 属性的img 元素），而不是img 元素上的背景图像。

【讨论】：