html - 为什么这个元素在 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

简答:

如果你加一个display: inline-block就可以解决在你的 CSS 中。

更长的答案:

它还在基于 Webkit 的浏览器(至少是 Chrome 和 Safari)中呈现。

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

<img>标签是 defined由 w3 作为内联 block 元素。

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

查看 this jsfiddle以不同方式获取 <img> 背景的一些实验要显示的标记。