javascript - 无法在非 IE 浏览器上看到图像

Question

我们有一个网页，点击“添加更多”链接会为我提供一个输入框以及一个名为“delImg”的“删除”按钮图像。单击“添加更多”链接时，我成功地添加了一个文本框并在 IE 浏览器上删除了图像。但同样的事情在 Mozilla/Chrome 上不起作用。我只能看到文本框，根本看不到删除按钮。

谁能告诉我非 IE 浏览器的问题是什么。

IE CSS 文件的 CSS 代码:-

span.delImg
{
height:25px;
width:17px;
margin-left: 10px;
margin-top: 1px;
background: url(../../img/icons/icn_Delete.png) no-repeat;
}

非 IE CSS 文件的 CSS 代码:-

span.delImg
{
height:25px;
width:17px;
margin-left: 10px;
margin-top: 1px;
background: url("../img/icons/icn_Delete.png") no-repeat;
}

Javascript 代码:-

var addMore = function() {
var numAdd = $("#emails > div").length;
       if (numAdd >= 10)

    return;

$('#emails').append("<div> <input type='text' class='GMtradeSearch' size='80' /> <span class='delImg' onclick='deleteMail(this);'/></div>");

    }

请帮忙。

Answer 1

跨度通常显示为“内联”，因为跨度内没有文本，这意味着它不会占用您的 UI 空间。所以没有空间来显示图像。将 span 的显示更改为内联 block 。

span.delImg
{
height:25px;
width:17px;
margin-left: 10px;
margin-top: 1px;
background: url("image.png") no-repeat;
display:inline-block;
}