在IE中隐藏的背景图像

Question

我有一个编辑按钮，当用户有权编辑时，它会出现在页面上。我已将其实现为链接：

<a class='editlink' href='edit.html'></a>

我相应的css将editlink类渲染为铅笔图标：

.editlink{
 background-image: url(../img/pencil.png);
 background-repeat:no-repeat;
 padding: 2px 8px;
}

这在Firefox中运行良好，但在IE中根本不会出现。如果我把＆amp; NBSP;在<a>标签内，它显示铅笔，但我希望保持标签为空。我可以对CSS进行修改来解决这个问题吗？

Answer 1

这是一个与IE中的hasLayout属性相关的错误。

尝试添加

zoom:1;

你的风格，它应该工作正常。

Answer 2

这实际上是IE中常见的问题。即使没有内容的表格单元也无法实际呈现或出现在文档中。这很正常。我给你的建议是将空间留在那里或建立链接“display：block;”然后使用宽度和高度使其变大或变小。这有与定位相关的问题，因为它不再是内联元素。

一个可靠的替代方案是获取链接并执行以下操作：

<a class='editlink' href='edit.html'><img src="img/pencil.png"></a>

这将确保它在所有浏览器中正确拉伸锚。

Answer 3

您可以在样式表中的链接上设置宽度和高度。这在FF，IE和Chrome中正确呈现：

.editlink{
 background-image: url(../img/pencil.png);
 background-repeat:no-repeat;
 padding: 2px 8px;
 width: 10px;
 height: 20px;
}