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圖標高度問題

回答

相關問題