Question

我正试图找到一个很好的原因来显示我的图标。

我想使用CSS而不是img标签。

我的代码：

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

.iconPrinter {background：url（../ images / BWIcons.gif）no-repeat 0 0;填充：0 8px;}

或

.iconPrinter {background：url（../ images / BWIcons.gif）no-repeat 0 0;宽度：16px的;}

它在FF上工作正常但在IE6上我无法看到图标，只有在跨度中插入跨度。

当我使用div或display：block;它工作正常，但我需要内联。

由于

Answer 1

我发现插入内联标记的最简单方法是使用IE6的内联标记：

（适用于16px图标）

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

.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}

Answer 2

如果没有内容，IE6可能不会显示带有填充的内联元素。尝试添加＆amp; nbsp;进入跨度;

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

（请注意，＆amp; nbsp;中有一个额外的空格the code coloring mangles it otherwise）

另一方面，为了给跨度增加宽度，您也可以尝试使用

.iconPrinter { display: inline-block; }

Answer 3

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

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

显示：-moz-inline-box; display：inline-block;

在我测试IE6,7,8，FF2,3的任何浏览器中，两次显示调用似乎都没有任何不良影响。

Answer 4

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

ie6在内联元素上有垂直填充的错误。你也可以使用div并浮动它们。

Answer 5

跨度内部是什么？什么？

尝试添加：

#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>

Answer 6

尝试为span类提供css高度。像

这样的东西

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

Answer 7

我意识到这是一篇较旧的帖子，但我在搜索时遇到了这个问题，并认为这可能有助于其他人。我使用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;
}

Answer 8

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

IE6：span（内联）与background-image

8 个答案: