Display: inline-block, или на грани кроссбраузерности (страница комментариев 3)

5 сентября 2011. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

baseline

Из этой заметки вы узнаете: Читать полностью »

Отзывы (47) на «Display: inline-block, или на грани кроссбраузерности»
  1. Andrey Leonidov (1 комментарий)

    Наверно в следующей версии CSS будут включены if-ы для IE6 и IE7 :))

    Ответить на этот комментарий
  2. Vova (1 комментарий)

    Здравствуйте.
    Не понял как вы в первом примере пробелы установили. Возможно они заложены в id="content2". Но css с этим id в коде не вижу.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      В первом примере пробелы присутствуют в коде html. Именно этим отличаются пробелы от отступов, задаваемых через css. Во втором примере пробелов нет — элементы написаны без разрывов.

      Ответить на этот комментарий
  3. Oleg (1 комментарий)

    Только учусь! смотрю регулярно Ваш блог. Спасибо! ;)

    Ответить на этот комментарий
  4. Roman (1 комментарий)

    О Спасибо попробуем!

    Ответить на этот комментарий
  5. uhuru (1 комментарий)

    Чтобы избавиться от пробелов между inline-block элементами можно задать родителю font-size:0px;, а нужный размер задать уже внутри элементов.

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Это один из вариантов. Просто раздражает необходимость лишних движений.

      Ответить на этот комментарий
  6. Вячеслав (1 комментарий)

    А что думаете по поводу такого решения данной проблемы?
    http://rmcreative.ru/blog/post/displayinline-block-dlja-vsekh-brauzerov

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      А чем это отличается от описанного в моей статье? Если, конечно, выкинуть хаки под сильно устаревшие версии браузеров.

      Ответить на этот комментарий
  7. sarandon (3 комментария)

    абсолютно кроссбраузерно, имхо
    использую для «плитки» разводящих каталогов в интернет-магазинах вместо float: left
    проблем пока не замечено…

    .anydiv ul li {
      width: 274px;
      min-height: 120px;
      display: -moz-inline-stack;
      display: inline-block;
      vertical-align: top;
      margin: 5px 0 30px 23px;
      zoom: 1;
      *display: inline;
      _height: 120px;
    }

    Ответить на этот комментарий
    • Княгиня (655 комментариев)

      Предыдущий комментатор дал ссылку ровно с таким же рецептом. И в обоих случаях я вижу хаки под устаревшие браузеры — например, под старые версии ФФ. А я тоже пользуюсь inline-block для разного рода плашек, будь то баннеры, блоки в слайдере, блоки товара в каталогах, и пр., но без всех этих старомодных дополнений — и оно работает.

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

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.