Html IE6:span（内联）与背景图像

我正试图找到一个好的为什么要显示我的图标

我想使用CSS而不是img标签

我的代码：

<span id="Span1" class="iconPrinter"></span>

.iconPrinter{background:url（../images/BWIcons.gif）不重复0；填充：0 8px；}

或

.iconPrinter{background:url（../images/BWIcons.gif）不重复0；宽度：16px；}

它在FF上运行良好，但在IE6上我看不到图标，只有在span中插入span

使用div或display时：block；它的工作很好，但我需要它是内联的

---

谢谢

您使用这些图标的目的是什么？如果你只想显示图标，为什么不使用“img”-tagg。如果您应该能够单击它们，请将它们包装成“a”-标记

---

ie6在内联元素上有一个垂直填充的错误。您还可以使用div并使其浮动。

IE6可能不会在没有内容的情况下显示带填充的内联元素。试着加入跨度

<span id="Span1" class="iconPrinter">& nbsp;</span>

---

跨度内是什么？有什么事吗

尝试添加：

#iconPrinter{
    background:url(../images/BWIcons.gif) no-repeat 0 0; 
    padding: 8px;
    text-indent: -100000px;
    overflow: hidden;
}

如果图标的跨度就在那里，那么添加一些html特殊字符。这可能会迫使IE承认某些东西存在，对于那些没有CSS或有屏幕阅读器的人来说，它更容易访问，比如：

<span id="iconPrinter">&#9113;</span>

⎙；

尝试为span类指定css高度。差不多

.iconPrinter{
    background:url(../images/BWIcons.gif) 
    no-repeat 0 0; 
    width:16px;
    height: 16px;
}

---

我发现插入像span这样的内联标签的最简单方法是使用IE6：

（用于16px图标）

.iconPrinter{background:url（../images/BWIcons.gif）不重复0；填充：0 7px；字体大小：16px；}

为了解决内联块的FF2问题，我在网上找到了一个适合我的设置的建议。现在对于我的设置，我有一个文本，它也有左边的填充，在文本的左边有一个背景图像。我需要整个跨度才能在单击时触发事件，这在我使用IE6或IE7中的显示块时是不会发生的

我来到这里，有人建议使用内联块来修复我的问题，但给我留下了FF2兼容性问题。然后我找到了这个解决方案

显示：-moz内联框； 显示：内联块

---

在我测试的IE6、7、8、FF2、3浏览器中，两个显示调用似乎都没有任何负面影响。

我意识到这是一篇较老的文章，但我在搜索时遇到了这个问题，并认为这可能会帮助其他人。我使用CSS背景图片作为链接，但在IE6和IE7上也有问题

.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;
}

以下是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
{
display: block;
float: left;
}

---

使用填充并在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 }

.iconPrinter{background:url（../images/BWIcons.gif）无重复0 0；填充：0 7px；高度：15px；缩放：1}

我认为img选项卡会降低页面加载速度。我知道div和float可以工作。我正在寻找CSS内联解决方案，我在没有a-tag的span上使用onlick，但a-tag的作用相同。为什么img标记会使页面加载变慢？是的，a-tag中的span也会导致相同的错误，因为它们都是内联元素。我不知道为什么您必须有一个css内联解决方案，但为什么要让它比必须的更难呢？：）如果将所有小映像合并到一个映像文件中，则可以减少服务器调用的次数。然后更改背景位置以显示每个图像。我不认为这可以用img-tag来完成，也可以用img-tag来完成，你只需要在它们中使用一个透明的img-src。我相信IE在8之前不支持内联块。也许他们最终在7中得到了它，但我必须检查一下。IE 6/7只接受具有自然显示的元素的值：inline，这是使用span.ZING时的情况！好电话。但我只是假设避免内联块作为IE解决方案，即使这有点迷信。只是因为它可能不可预测。错误-内联块在ie中是完全可预测的。它失败的唯一地方是ffx2text缩进不工作。只有在span中添加了一些内容。对，但是如果在span中添加了一些内容，则需要进行文本缩进，否则span中的内容将显示在图标顶部。您只能为块级别元素指定高度和宽度。这就是为什么创建了

inline block

，但IE才刚刚开始支持它。谢谢，但我正在寻找一个inline解决方案

.icon-edit, .icon-delete, .icon-error, .icon-success, .icon-notice, .icon-email
{
display: block;
float: left;
}

<span id="Span1" class="iconPrinter"></span>

.iconPrinter {background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; height: 15px; zoom: 1 }