如何讓DIV像IMG一樣用作CSS精靈呢？

Question

我編寫的代碼可以根據頁面中的IMG標簽自動創建CSS sprite，並用DIV替換它們（我認為是）適當的CSS，將精靈圖像定位為背景，讓相應的部分顯示出來 - 問題是我不能讓DIV表現為IMG替代品的下降。

如果我將默認的'display'值設置為'block'，那么如果原始IMG位於某些文本的末尾，則替換DIV將跳到文本后面的下一行（這當然是我期望的東西） with display：block to do）。

如果我將'display'更改為inline，那么DIV與文本保持在同一行，但它忽略了我設置和折疊的'width'和'height'。 我已經嘗試將其放入DIV內部，但它只占用了足夠的寬度來容納NST。

我已經嘗試過將顯示設置為所有可能的值（包括“表格行”，“磨合”，“緊湊”等“模糊”），但都沒有運氣。 甚至可以創建一個與IMG具有相同布局行為的DIV嗎？

我願意擁有比單個DIV更復雜的東西，但是我已經嘗試了那里明顯的東西（一個DIV在另一個內部DIV設置為顯示的內部：阻止外部設置顯示：內聯）但我避風港找不到那種方法可以合並。

在替換的IMG / DIV之外我總能做一些特定的事情來獲得我想要的布局，但我的目標是擁有一個通用的自動CSS-sprite機制，無論HTML的其余部分如何都能工作。

Answer 1

你試過display: inline-block; ？

你可能還需要使用display: -moz-inline-block; 對於firefox2

Answer 2

圖像具有“display：inline-block”的等價物。 這最初並未包含在CSS中，但部分添加是為了解決圖像以這種方式運行的事實。

問題是所有瀏覽器現在都支持它。 如果你想在一年前支持瀏覽器，你就會陷入困境。

另一個但不是很好的解決方案是浮動div（“float：left”）。

inline-block ：在CSS 2.1中引入。 這會導致元素生成一個塊元素框，該框元素框將與周圍的內容一起流動，就好像它是一個單獨的內聯框（ 行為很像被替換的元素[意味着圖像] ）。

來源Mozilla開發人員中心

Answer 3

顯示：內聯塊應該在這種情況下工作。 你試過嗎？