moz-inline-stack

Боремся с отсутствием со стороны Файрфокса 2 поддержки простого, но нужного свойства inline-block

Так случилось, что ФФ2 не поддерживает для свойства display значения inline-block. Взамен него в ФФ2 есть несколько нестандартных CSS-свойств, в частности -moz-inline-stack. �?з того, что я знаю, это свойство лучше других подходит для повторения поведения, подобного inline-block. Но при его использовании надо учитывать несколько странностей. Для демонстрации этих странностей CSS-свойства буду прописывать инлайн, а для просмотра этих странностей вам понадобится браузер Файрфокс 2.

1. По умолчанию в элементах с -moz-inline-stack слова не переносятся на новую строку. То есть установлено CSS-свойство white-space: nowrap (запрещает перенос слов на новую строку внутри элемента, для которого указано). Переопределить на white-space: normal не удастся(слова переносятся как обычно: по пробелу или по мягкому переносу,— если не установлены другие свойства, отвечающие за переносы строк. Но это уже CSS 3).

   • Простой текст в элементах с display:-moz-inline-stack

     Ширина не задана, элементы остаются на одной строке, но им можно задать высоту.

     простой текст
     простой тестовый текст

   Ограничим ширину

   простой текст, который не помещается на одной строке
   DIV шириной в 100px

   Если посмотрите в код страницы, то увидите, что в первом элементе текста больше, чем показывает браузер. Текст не перенесся на новую строку и был обрезан.

   Решение

   Добавим внутрь нужного нам элемента другой, который по умолчанию имеет бочные свойства или же элемент, которому явно зададим ему свойство display: block

   простой текст, который не помещается на одной строке с внутренним DIV
   DIV шириной в 100px. простой текст, который не помещается на одной строке с внутренним SPAN, которому прописано display: block
2. Еще странность. Если внутри элемента с display:-moz-inline-stack вы поместите не просто текст, а текст разбитый на части какими-либо строчными элементами, то они будут располагаться стопкой, то есть друг над другом. (В общем это следует из названия свойства =)
   

   Пример

   Поместим внутрь display:-moz-inline-stack-элемента 2 спана с разным количеством текста. Для наглядности зададим разный цвет тексту

   простой тестовый текст

   Еще интереснее, если вместе с текстом поместить внутрь картинку.

   простой тестовый

   Картинка будет растянута или сплющена по размерам display:-moz-inline-stack-элемент.

   Решение такое же.

   Стоит нам обернуть содержимое display:-moz-inline-stack-элемента, хотя бы в параграф, все чудесным образом исправляется

   простой текст текст

   просто moz-inline-stack

   Хотя и теперь присутствие картинки приводит к странному поведению. Несмотря на то, что места достаточно, чтобы вытянуть текст в одну строку, Файрфокс 2 зачем-то делает перенос.

Вот некоторые странности этого «чудесного» свойства display:-moz-inline-stack. К счастью Файрфокс 3 начал поддерживать свойство inline-block. Теперь нет особой необходимости в использовании display:-moz-inline-stack, но если вы хотите, чтобы ваши творения могли в полной мере оценить и редкие теперь пользователи Файрфокса 2, то предложенные решения некоторых проблем с использованием этого странного свойства могут вам пригодиться.

Уже с полгода как я почти не использую display:-moz-inline-stack, если нет специальной оговорки от заказчика, что все должно быть красиво и во втором Файрфоксе. Отсутствие в стилях этого свойства в большинстве случаев при грамотной верстке не приведет к искажению содержания, а лишь немного уменьшит количество и качество оформления