我正试图找到一个很好的原因来显示我的图标。
我想使用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;它工作正常,但我需要内联。
由于
答案 0 :(得分:3)
我发现插入内联标记的最简单方法是使用IE6的内联标记:
(适用于16px图标)
<span id="Span1" class="iconPrinter"> </span>
.iconPrinter{background:url(../images/BWIcons.gif) no-repeat 0 0; padding:0 7px; font-size:16px;}
答案 1 :(得分:2)
如果没有内容,IE6可能不会显示带有填充的内联元素。尝试添加&amp; nbsp;进入跨度;
<span id="Span1" class="iconPrinter">& nbsp;</span>
(请注意,&amp; nbsp;中有一个额外的空格the code coloring mangles it otherwise)
另一方面,为了给跨度增加宽度,您也可以尝试使用
.iconPrinter { display: inline-block; }
答案 2 :(得分:1)
为了解决内联块的FF2问题,我在网上找到了一个适用于我的设置的建议。现在,对于我的设置,我有一个文本也有左边的填充和背景图像设置在文本的左侧。我需要整个范围才能在点击时触发事件,当我在IE6或IE7中使用显示块时,这种情况就不会发生。
我来到这里并建议使用内联块来修复我的问题,但让我遇到了FF2兼容性问题。然后我找到了这个解决方案。
显示:-moz-inline-box; display:inline-block;
在我测试IE6,7,8,FF2,3的任何浏览器中,两次显示调用似乎都没有任何不良影响。
答案 3 :(得分:0)
图标的目的是什么?你只是想显示图标,为什么不使用“img”-tagg。如果您应该能够单击它们将它们包装在“a”-tagg中。
ie6在内联元素上有垂直填充的错误。你也可以使用div并浮动它们。
答案 4 :(得分:0)
跨度内部是什么?什么?
尝试添加:
#iconPrinter{
background:url(../images/BWIcons.gif) no-repeat 0 0;
padding: 8px;
text-indent: -100000px;
overflow: hidden;
}
如果跨度只是图标的那个,添加某种html特殊字符。这可能会迫使IE承认某些东西存在,并且对于那些没有CSS或屏幕阅读器的人来说更容易理解,例如:
<span id="iconPrinter">⎙</span>
答案 5 :(得分:0)
尝试为span类提供css高度。像
这样的东西.iconPrinter{
background:url(../images/BWIcons.gif)
no-repeat 0 0;
width:16px;
height: 16px;
}
答案 6 :(得分:0)
我意识到这是一篇较旧的帖子,但我在搜索时遇到了这个问题,并认为这可能有助于其他人。我使用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;
}
答案 7 :(得分:0)
使用填充并在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 }