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

Question

以下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;
}

Answer 1

简短回答：

如果在css中添加display: inline-block ，则可以修复它。

更长的回答：

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

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

<img>标记由w3 定义为内联块元素。

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

查看这个jsfiddle进行一些实验，获得显示<img>标签背景的不同方法。

Answer 2

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

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