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不像其他浏览器那样解释图像标记。

w3的<img>标记为defined，作为内联块元素。

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

使用不同的方式查看<img>标记的背景，查看this jsfiddle进行一些实验。

Answer 2

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

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

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

2 个答案:

简答：

更长的回答：