Как я могу заставить DIV вести себя как IMG для использования в качестве спрайта CSS?

Я написал код, который автоматически создает спрайты CSS на основе тегов IMG на странице и заменяет их DIV с (как я думал) подходящим CSS для позиционирования изображения спрайта в качестве фона, позволяющего отображать соответствующую часть - проблема в том, что я не могу заставить DIV вести себя как замену IMG.

Если я оставлю значение «отображения» по умолчанию, установленное на «блок», тогда, если исходный IMG был расположен в конце некоторого текста, замещающий DIV перейдет на следующую строку после текста (что, конечно, я ожидал чего-то с дисплеем: блокировать).

Если я изменю «отображение» на встроенный, то DIV останется на той же строке, что и текст, но игнорирует установленные мной «ширину» и «высоту» и сворачивается. Я пытался поместить внутри DIV, но тогда он занимает достаточную ширину, чтобы содержать nbsp.

Я пытался поэкспериментировать с настройкой отображения на все возможные значения (включая «непонятные», такие как «строка таблицы», «обкатка», «компактный» и т. д.), но все безуспешно. Возможно ли вообще создать DIV с тем же поведением макета, что и IMG?

Я готов иметь что-то более сложное, чем просто один DIV, однако я пробовал там очевидные вещи (один DIV внутри другого, где внутренний DIV настроен на отображение: блок с внешним набором для отображения: встроенный), но я не не нашел там комбинации, которая работает.

Всегда есть определенные вещи, которые я могу сделать помимо замененного IMG/DIV, чтобы получить нужный мне макет, но моя цель — иметь общий механизм авто-CSS-спрайтов, который работает независимо от остального HTML.


person John    schedule 11.11.2008    source источник


Ответы (3)


Вы пробовали display: inline-block; ?

возможно, вам также придется использовать display: -moz-inline-block; для firefox2

person Andy Ford    schedule 11.11.2008

Изображения имеют эквивалент «отображение: встроенный блок». Первоначально это не было включено в CSS, но было добавлено частично, чтобы учесть тот факт, что изображения ведут себя таким образом.

Проблема в том, что все браузеры только сейчас его поддерживают. Если вы хотите поддерживать браузеры даже годичной давности, вы застряли.

Другим, но не таким хорошим решением является плавание div ("float: left").

inline-block: появился в CSS 2.1. Это приводит к тому, что элемент генерирует блок блочного элемента, который будет перетекать с окружающим содержимым, как если бы он был одиночным встроенным блоком (ведет себя так же, как замененный элемент [имеется в виду изображение].).

Источник Центра разработчиков Mozilla

person Seamus    schedule 11.11.2008

Отображение: встроенный блок должен работать в этой ситуации. Вы пробовали?

person buti-oxa    schedule 11.11.2008
comment
Пришлось отображать: -moz-inline-block; отображение: встроенный блок; чтобы заставить его работать в обоих браузерах, но это помогло. - person John; 11.11.2008