div/span和精靈

我用精靈替換了我網站上的大多數內聯圖像。div/span和精靈

Sprite類會包含一些基本的CSS：

.sprite{ 
background-image:url(...); 
background-position:...; 
width: 16px; 
height:16px; 
}

我看到嵌套一個錨標記的內部DIV是不是一個好主意。

<a><div class="sprite"></div></a>

我試着添加精靈來代替span元素。

<a><span class="sprite"></span></a>

但是span元素不擴展到我設置的寬度和高度。能夠使用span元素替換帶有精靈的圖像標籤真的很有用。我可以在span元素中添加一個空白的gif圖像來展開它。但是這將打敗我爲什麼要使用精靈的原因（減少http請求的數量）。

在錨標記中使用div元素不正確。

那麼我怎樣才能使用錨元素內的精靈？

而且總是存在對齊div的問題。如果圖片以另一個元素爲中心，我如何用精靈替換它？

來源

2010-09-27 reggie

請勿將精靈用於內容圖像。您犧牲了清晰的語義，可訪問性和可維護性。減少HTTP請求的數量並不重要。 – Quentin 2010-09-27 12:35:06

@大衛：這不取決於圖像的數量和大小？儘管這是一個代價高昂的交易，我會同意的。 – 2010-09-27 12:41:36

您需要在span元素上聲明display: block;，這些元素默認爲內聯元素。例如：

.sprite{ 
    display: block; 
    background-image:url(...); 
    background-position:...; 
    width: 16px; 
    height:16px; 
}

這應該使span元素展開到所需的寬度/高度。

希望這會有所幫助！

來源

2010-09-27 12:33:40

我們可以將'width'或'height'添加到像span這樣的內聯元素，還是我們只需使用'display：block'將它轉換爲'div'？ – Swanand 2010-09-27 12:46:58

你幾乎只是將它轉換爲'div'。 – Kyle 2010-09-27 12:55:14

是的，你可以爲寬度添加寬度和/或高度屬性，但是除非你改變它的行爲，這是'display：block;'進場的地方，否則它們將被忽略，並且沒有，元素沒有被「轉換「 - 它仍然是一個」跨度「 - 但它的默認行爲正在改變，它會像'div'一樣行事。希望這是有道理的。 – 2010-09-27 12:57:18

回答

相關問題