我正在努力寻找一个很好的理由来显示我的图标。
我想使用 CSS 而不是 img 标签。
我的代码：
<span id="Span1" class="iconPrinter"></span>
.iconPrinter{background:url(../images/BWIcons.gif) 不重复 0 0;填充：0 8px;}
或
.iconPrinter{background:url(../images/BWIcons.gif) 不重复 0 0;宽度：16px;}
它在 FF 上运行良好，但在 IE6 上我看不到图标，只有在跨度中插入一个跨度。
当我使用 div 或 display:block;它工作正常，但我需要它是内联的。
谢谢
【问题讨论】：
标签： html css internet-explorer-6
使用填充并在您的 css 类中添加 zoom: 1
<span id="Span1" class="iconPrinter"></span>
.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }
【讨论】：
我意识到这是一篇较旧的帖子，但我在搜索时遇到了这个问题，并认为这可能对其他人有所帮助。我使用 CSS 背景图像作为链接，并且在 IE6 和 IE7 上也遇到了问题。
这是 HTML：
<a href="edit_admin.php" class="icon-edit" title="Edit Admin">Edit Admin</a>
<a href="delete_admin.php" class="icon-delete" title="Delete Admin">Delete Admin</a>
这是我针对 IE6 和 IE7 以外的浏览器的 CSS。
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
height: 16px;
width: 16px;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 0px;
float: none;
display: -moz-inline-box; /* For FF 2 */
display: inline-block;
text-indent: -9999px;
overflow: hidden;
}
这是我有条件地只为 IE6 和 IE7 添加的附加 css：
.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}
【讨论】：
为了解决 FF2 的 inline-block 问题，我在网上找到了一个适合我的设置的建议。现在对于我的设置，我有一个文本，它也有 padding-left 和一个 background-image 设置在文本的左侧。单击时我需要整个跨度来触发事件，而当我在 IE6 或 IE7 中使用显示块时，这并没有发生。
我来到这里，有人建议使用 inline-block 来解决我的问题，但给我留下了 FF2 兼容性问题。然后我找到了这个解决方案。
显示：-moz-inline-box； 显示：内联块；
在我测试过的任何浏览器 IE6、7、8、FF2、3 中，两个显示调用似乎都没有任何不利影响。
【讨论】：
我发现在 IE6 上插入像 span 这样的内联标记的最简单方法是：
（对于 16px 图标）
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
【讨论】：
尝试为 span 类赋予 css 高度。类似的东西
.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
【讨论】：
inline-block 被创建，但 IE 几乎没有开始支持它的原因。
如果内联元素没有内容，IE6 可能不会显示带有填充的内联元素。尝试添加 进入跨度；
<span id="Span1" class="iconPrinter">& nbsp;</span>
（请注意， 中有一个额外的空格作为the code coloring mangles it otherwise）
另一方面，为了给跨度一个宽度，你也可以尝试使用
.iconPrinter { display: inline-block; }
【讨论】：
跨度内部是什么？有什么事吗？
尝试添加：
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
如果跨度正好是图标，添加某种 html 特殊字符。这可能会迫使 IE 承认存在某些东西，并且对于那些没有 CSS 或使用屏幕阅读器的人来说更容易访问，例如：
<span id="iconPrinter">⎙</span>
【讨论】：
您使用这些图标的目的是什么？你只是想显示图标，为什么不使用“img”-tagg。如果您应该能够单击它们，请将它们包装在“a”标签中。
ie6 有一个内联元素垂直填充的错误。您也可以使用 div 并将它们浮动。
【讨论】：