CSS Guru

Боремся с отсутствием со стороны Файрфокса 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, если нет специальной оговорки от заказчика, что все должно быть красиво и во втором Файрфоксе. Отсутствие в стилях этого свойства в боль�?инстве случаев при грамотной верстке не приведет к искажению содержания, а ли�?ь немного умень�?ит количество и качество оформления

Запись создана: Вторник, 7 Апрель 2009 в 22:58 и находится в рубриках CSS. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.