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

moz-inline-stack: 7 комментариев

  1. Спасибо за обзор. В нескольких проектах использовал -moz-inline-stack, а проверить под FF2 не удосуживался. А в один момент глянул под FF2 и понял что -moz-inline-stack — не идиальный способ эмуляции inline-block’а.

    В общем, побежал исправлять глюки :)

  2. я всегда использую для этого свойство:
    display: -moz-inline-box;

  3. еще более бажное свойство — дайте ссылку, как вы добиваетесь переноса внутри подобного блока

  4. admin,
    добавь обёрку внутрь инлайн-блока, если я тебя правильно понял.

    <inline-block>
    <wrapper>
    Содержимое
    </wrapper>
    </inline-block>

    Тогда в блок можно будет добавить много элементов.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *