css图标高度问题

我想要在我的HTML页面中设置格式化“显示更多”链接的标准方法。css图标高度问题

在HTML中使用：

<span class="showMore">Show more details</span>

然后在CSS，我有：

.showMore { 
    color: #0E4B82; 
    padding-left: 18px; 
    background: url("images/icons/add.png") no-repeat 0px 0px; 
} 

.showMore:hover { 
    color: #F5891D; 
    cursor: pointer; 
}

其中add.png是16×16的famfamfam丝绸图标。我使用JavaScript扩展了一些使用onclick事件的内容部分。

这很适用于Firefox 3.0.5，但在IE 7中，图标的最后几个像素被切掉。我正在寻找解决方法。使用高度不适用于内嵌元素，如<span/>。添加透明边框可以解决IE7中的问题：

.showMore { 
    border: 1px solid transparent; 
    color: #0E4B82; 
    padding-left: 18px; 
    background: url("images/icons/add.png") no-repeat 0px 0px; 
}

但IE6不处理透明度。让文字更大可以解决问题，但我不想要大文本。 line-height不起作用。任何人都知道可能有帮助的事

来源

2009-01-23 Tom

我已经解决了这个问题。我不知道为什么，但使用no-repeat center left而不是no-repeat top left确保IE不切断图标的底部2像素。为什么使用center而不是top应该会导致图像更高，这很奇怪，但这对你来说是IE？

.showMore { 
    color: #0E4B82; 
    padding-left: 18px; 
    background: url("images/icons/add.png") no-repeat center left; 
} 

.showMore:hover { 
    color: #F5891D; 
    cursor: pointer; 
}

来源

2009-01-23 10:57:25 Tom

这可能与IE如何渲染文本基线有关。很好的解决方法，但应注意。 – annakata 2009-01-23 11:06:41

是否

display: block; 
height: 16px;

帮助解决跨度的高度？

来源

2009-01-23 10:54:21

是的，它修复它与使用div而不是跨度相同。但随后文本换行换行。在这种情况下，我特别需要内联元素，而高度属性不适用于内联非替换元素，即跨度。 – Tom 2009-01-23 11:02:06

css图标高度问题

回答

相关问题