Wie kann ich ein DIV verhalten sich wie ein IMG für die Verwendung als CSS-Sprites?

Question

Ich habe Code geschrieben, die CSS-Sprites erstellt automatisch auf der Grundlage der IMG-Tags auf einer Seite und ersetzt sie mit divs mit (was ich dachte war) entsprechende CSS-Sprite Bild als Hintergrund zu positionieren durch den entsprechenden Teil zeigen zu lassen - das Problem ist, dass ich nicht DIVs als Drop-in Ersatz für IMGs verhalten bekommen.

Wenn ich den Standard ‚display‘ Wert auf ‚Block‘ dann verlassen, wenn die ursprüngliche IMG am Ende etwas Textes positioniert wurde, wird der Ersatz DIV in der nächsten Zeile springen, nachdem Text (was natürlich ist, was ich erwarten würde etwas mit Display. Block zu tun)

Wenn ich die ‚display‘ zu inline ändern, dann bleibt der DIV auf der gleichen Linie wie der Text, aber es ignoriert die ‚Breite‘ und ‚Höhe‘ Ich habe festgelegt und zusammenbricht. Ich habe versucht, ist in der DIV setzen, aber dann dauert nur genügend Breite enthält, um die nbsp oben.

Ich habe versucht, das Experimentieren mit allen möglichen Werten (einschließlich den „obskuren“ Einsen wie ‚table-row‘, ‚run-in‘, ‚kompakt‘, etc.), aber alle ohne Glück Einstellung Display. Ist es sogar möglich, ein DIV mit dem gleichen Layout Verhalten als IMG zu erstellen?

Ich bin offen etwas komplizierter als nur ein einzelnes DIV zu haben, aber ich habe die offensichtlichen Dinge dort versucht (ein DIV in einer anderen, wo die innere DIV Anzeige eingestellt ist: Block mit dem äußeren Satz auf display: inline) aber ich habe nicht eine Kombination dort gefunden, die entweder funktioniert.

Es gibt immer bestimmte Dinge, die ich außerhalb des ersetzten IMG / DIV tun kann, um das Layout Ich möchte, aber mein Ziel ist es, einen generischen Auto-CSS-Sprite-Mechanismus zu haben, die unabhängig von dem Rest des HTML funktioniert.

Answer 1

Haben Sie versucht, display: inline-block;?

Sie können auch display: -moz-inline-block; für firefox2 verwenden müssen

Answer 2

Bilder haben ein Äquivalent von "display: inline-block". Dies war ursprünglich nicht in CSS enthält, wurde aber teilweise zu adressieren die Tatsache hinzugefügt, dass die Bilder auf diese Weise verhalten.

Das Problem ist, dass alle Browser sind jetzt nur um es zu unterstützen. Wenn Sie Browser unterstützt von noch vor einem Jahr mögen, sind Sie stecken.

Ein weiterer, aber nicht so groß, Lösung schwebt die div. ( "Float: left")

  

Inline-Block : Eingeführt in CSS 2.1. Dies bewirkt, dass das Element ein Blockelement Feld zu erzeugen, die Inhalte mit den umliegenden geflossen werden, als ob es sich um eine einzelne Inline-Box waren ( wie ein ersetzt Element verhält [gemeint ist ein Bild] würde .).

Quelle Mozilla Developer Center

Answer 3

Anzeige: inline-block soll in dieser Situation arbeiten. Haben Sie versucht, es?