CSS不顯示圖像，除非<a has spaces

I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png CSS不顯示圖像，除非<a has spaces

當裝載大拇指

.thumb-down { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px; 
    width: 15px; 
    height: 16px; 
} 

.thumb-up { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px; 
    width: 15px; 
    height: 16px; 
}

我能得到豎起大拇指展現出來的唯一方法是，如果我這樣做：

Was this review helpful? <a href="#" class="thumb-up rating">     </a> | <a href="#" class="thumb-down rating">     </a>

如果我刪除所有 然後拇指消失。如果我只留下一個 ，那麼它會顯示精靈的部分視圖。

我如何使用float:left顯示精靈，而不需要 ?

來源

2012-06-04 Kyle

：

.thumb-down { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px; 
    width: 15px; 
    height: 16px; 
    float: left; /* OR float:right, depending on what you need */ 
} 

.thumb-up { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px; 
    width: 15px; 
    height: 16px; 
    float: left; 
}

來源

2012-06-04 09:26:01

使用'display：block;'是超快的，因爲浮動元素自動是塊元素。 – Guffa

@Guffa，我可以使用內聯塊，但顯然IE7不太喜歡它http://flipc.blogspot.sg/2009/02/damn-ie7-and-inline-block.html –

@Guffa哦，你正在談論一個完全不同的東西：對不起。編輯。謝謝 –

的圖像是一個背景。但爲了使背景可見，元素必須具有一定的高度和寬度。在你的情況下，空標籤沒有高度和寬度。你應該讓它顯示：塊

來源

2012-06-04 09:26:12

只需在你的兩個CSS類中使用display: inline-block;。

來源

2012-06-04 09:30:11

由於鏈接是內嵌元素，因此無法爲它們指定寬度和高度。他們只從他們的內容獲得他們的大小，這就是爲什麼空間給他們的大小。

我認爲您使用的最佳選擇是製作鏈接內嵌塊元素。這樣，它們就是塊元素，因此它們可以具有特定的寬度和高度，但它們仍然是文本流中的內聯元素，因此您不必更改標記。

.thumb-down { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px; 
    display: inline-block; 
    width: 15px; 
    height: 16px; 
} 

.thumb-up { 
    background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px; 
    display: inline-block; 
    width: 15px; 
    height: 16px; 
}

來源

2012-06-04 09:30:28 Guffa

CSS不顯示圖像，除非<a has spaces

回答

相關問題