2010-08-17 126 views
0

当用户有权编辑时,我有一个编辑按钮出现在页面上。我已经实现了它作为一个链接:IE中隐藏的背景图像

<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中出现的所有。如果我把一个& nbsp;在<a>标签内,然后显示铅笔,但我希望将标签保留为空。有没有修改我可以做的CSS来解决这个问题?

回答

2

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

尝试增加

zoom:1; 

你的风格,它应该工作的罚款。

+0

,突然间我的整个网站在IE中运行。这解决了它完美。谢谢。 – 2010-08-18 00:15:33

+0

很高兴能帮到你!更好地保持这个hasLayout在内存中的东西。它会更有可能在一天或另一天再次出现。 – 2010-08-18 00:52:41

0

这实际上是IE中很常见的问题。即使没有内容的表单元格也无法实际呈现或出现在文档中。这很正常。我对你的建议是保持空间在那里或使链接“显示:块;”然后使用宽度和高度使其变大或变小。这有它自己的定位问题,因为它不再是一个内联元素。

一个坚实的替代办法是采取的链接并执行以下操作它:

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

这将确保它正常伸展锚在所有浏览器。

+0

谢谢,山姆。我们无法执行标记的原因是需要我们的代码生成链接才能知道图像所在的路径。除了任何其他解决方案,我可能会选择空间选项。 – 2010-08-17 23:59:37

0

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

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