<rmcreative>

RSS

display:inline-block для всех браузеров

15 ноября 2007

div{
  width:100px;
  height:100px;
  background:red;
  margin:1px;
 
  display:-moz-inline-stack;/*Firefox 2*/
  display:inline-block; /*Хорошие браузеры*/
  _overflow:hidden;/*IE6, IE7*/
  *zoom:1;/*включаем hasLayout для IE6, IE7*/
  *display:inline;/*при hasLayout true display:inline в IE6, IE7 ведёт себя как display:inline-block*/
}
‹div›1‹/div›
‹div›2‹/div›

Пример использования

Комментарии RSS

  1. №834
    RANDRS
    RANDRS 10 нояб. 2008 г., 12:00:25

    Вы гений, ну или тот кто это все изобрел. Объясните, как вы про это вообще догадались? Откуда взялось это все?

    display:-moz-inline-stack;/Нужно для Firefox/

    display:inline-block; /Не применяется в IE и Firefox/

    _overflow:hidden;/*фикс для IE6*/

    zoom:1;/включаем hasLayout/

    display:inline;/при hasLayout true display:inline ведёт себя как display:inline-block*/

    Мне это помогло. Ура!

  2. №835
    Sam
    Sam 10 нояб. 2008 г., 13:46:30

    Я это подсмотрел у Hedger Wang. В посте есть ссылка.

    -moz — это эксклюзив FireFox.

    hasLayout — страшная штука от Microsoft.

  3. №919
    Dr. Holerik
    Dr. Holerik 01 дек. 2008 г., 20:39:28

    Спасибо за рецепт, неплохо работает в IE 6/7 и FF 2.

  4. №979
    Азазелло
    Азазелло 18 дек. 2008 г., 19:42:46

    Спасибо, помогло.

  5. №1139
    Dr. Holerik
    Dr. Holerik 21 янв. 2009 г., 20:18:58

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

    В принципе обёрточный div в li и не нужен. Во всяком случае, в IE с 5.5 по 8 Beta 2, FF 3.0, Safari 3.2 и Opera 9.2-9.6 всё нормально работает и без него. Но вот в FF 2.0 при печати галереи без обёрточных div'ов получается лажа: либо блоки наползают друг на друга, либо частично не отображаются. Таким образом, приходится обёртывать содержимое элементов галереи, что увеличивает html-код.

    Если кто найдёт кроссбраузерное CSS-решение данной проблемы – да опубликует его в помощь верстальщикам-рационализаторам.

    Так же замечено, что при вытягивании любого списка в строчку (li { display: inline | inline-block | inline-table;} после каждого элемента образуется по пробелу. Если сделать li списка блочными (со всеми вытекающими), то пробелы упраздняются. Эффект исчезновения пробелов в IE наблюдался так же при li { zoom: 1; }. Приходится мириться с данными пробелами, устанавливая несимметричный отступ и компенсируя таким образом их ширину, либо делать их блочными и колдовать с float'ом и позиционированием.

    Да мало того, окаянный FF 2.0 и тут готовит нам сюрприз: он не правильно центрирует эти пробелы в галереях, смещая их к левому элементу. Зрительно это не видно, но если применить к блоку с неизвестной шириной внутри li галереи псевдоклассы :hover/:active, то поля оного блока деформируются по ширине. Такой же эффект, в блоках, в которых помимо img находятся строчные элементы с текстом, то деформация происходит и в Safari. Приходится делать img внутри блочных span так же блочными, и центрировать их (margin: 0 auto;). Но в таком случае, IE происходит перенос строк, и вся строчно-блочная вёрстка рушится (блоки галереи располагаются вертикально). Приходится делать в условном комментарии для IE изображения галереи строчными, а в html добавлять
    после . Но для остальных браузеров картинки остаются блоками, по этому приходится нивелировать влияние переноса строки внутри блока-ссылки (.block-link br { display: none; }).

    Казалось бы, всё; но оказывается, что Opera < 9.5 неправильно работает с псевдокласссами :hover/:active для блока, в котором содержатся блочные элементы (если подвести курсор/нажать на пустое пространство – псевдокласс работает, но если сделать тоже над содержимым – отклик отсутствует). Приходится пользоваться CSS-хаком @media screen and (min-width: 0px), внутри которого изображения делаются строчными и восстанавливается перенос строки.

    Помимо выше описанного способа с рациональной, но сложной и не валидной CSS-техникой, существует комплексное решение: продублировать классы для изображений классами для блоков ссылок, в которых они размещены. Так же придётся к блочным span внутри li галереи задавать доп. класс, в котором установлена ширина.

    Разумеется, данный способ увеличивает html за счёт добавления доп. класса к каждой секции галереи и раздувает css дополнительными классами с заданой шириной для каждого типа блоков-ссылок. С другой стороны, всё обходится без сложной вёрстки с блочными img, доп. кодом в CC для IE и CSS-хаков.

    Однако, я выбираю более изящный, рациональный и универсальный способ, тем более, что в прямых браузерах всё отлично работает и без CC/CSS-хаков. Рад был бы увидеть и другие способы решения проблемы с пробелами в меню и галереях.

    В заключение привожу фрагменты кода Naumov-Art в качестве примера рабочего материала моих наблюдений:

    Абстрактный фрагмент галереи:

    <ul class="gallery">
     <li>
      <div>
       <a>
        <span class="block-link">
         <img />
         <br />
         <span>#1</span>
        </span>
       </a>
      </div>
     </li>
     <li>
      <div>
       <a>
        <span class="block-link">
         <img />
         <br />
         <span>#2</span>
        </span>
       </a>
      </div>
     </li>
     <li>
      <div>
       <a>
        <span class="block-link">
         <img />
         <br />
         <span>#3</span>
        </span>
       </a>
      </div>
     </li>
    </ul>

    Структура галереи:

    /* *** элемент галереи *** */
    .gallery li {
     display: -moz-inline-stack; /* *** inline-block для Mozilla *** */
     display: inline-block;
     position: relative;
     text-align: center;
     vertical-align: bottom;
    }

    Ссылки:

    /* *** не посещённая ссылка *** */
    a:link { color: #ff0000; }
     
    /* *** посещённая ссылка *** */
    a:visited { color: #a60000; }
     
    /* *** не посещённый блок-ссылка *** */
    a:link .block-link { border-color: #ff0000; }
     
    /* *** посещённый блок-ссылка *** */
    a:visited .block-link { border-color: #a60000; }
     
    /* *** ссылка в фокусе *** */
    a:focus { background-color: #ffff88; }

    Блоки-ссылки:

    /* *** блок-ссылка *** */
    .block-link {
     display: block;
     position: relative;
     border-width: 0;
     padding: 9px;
    }
     
    /* *** изображение блока-ссылки *** */
    .block-link img {
     display: block; /* *** для переноса строки *** */
     margin: 0 auto; /* *** центрирование *** */
    }
     
    /* *** перенос строки блока-ссылки *** */
    .block-link br { display: none; /* *** скрытие *** */ }
     
    /* *** стиль только для Opera < 9.5  *** */
    @media screen and (min-width: 0px) {
     /* *** изображение и перенос строки блока-ссылки *** */
     html:first-child .block-link img,
     html:first-child .block-link br { display: inline; }
    }
     
    /* *** выделенный и нажатый блок-ссылка *** */
    .block-link:hover,
    .block-link:active {
     border-width: 1px;
     padding: 8px;
    }
     
    /* *** выделенный блок-ссылка *** */
    .block-link:hover {
     border-style: dashed;
     background-color: #ffffaa;
    }
     
    /* *** нажатый блок-ссылка *** */
    .block-link:active {
     border-style: solid;
     background-color: #ffff88;
    }

    P.S. Любые предложения по модернизации вёрстки пишете на dr.holerik@gmail.com.

  6. №1143
    Sam
    Sam 21 янв. 2009 г., 22:25:40

    Мне как-то очень понравилось как сделано вот это. Рекомендую.

  7. №1199
    гб
    гб 04 февр. 2009 г., 18:55:41

    display:-moz-inline-stack;

    О боже. Фаерфокс такое дерьмо.

  8. №1287
    Dev
    Dev 18 февр. 2009 г., 3:40:51

    пожалуй поддержу предыдущего оратора

    а решение хорошее. замут серьезный :)

  9. №1356
    Vii
    Vii 10 марта 2009 г., 19:27:17

    Столкнулся с проблемой в Opera 9.2: как-то странной обрабатывает связку display:inline-block; и position:relative; (дочерние элементы с position:absolute; куда-то пропадают).

    То что с -moz-inline-stack (-moz-inline-box) есть такая же проблема знал давно, но что с оперой делать?

  10. №1388
    Sgustok Design
    Sgustok Design 18 марта 2009 г., 18:16:32

    спасибо, очень помогла

    только у меня возникла проблема. спава от блока под Firefox и Opera появляется пробел, под Explorer уго нет, подскажите пожалуйста как его убрать, margin не помогает(

    .content-right-music {

    background-color:#f9abdd;

    width: 125px;

    margin: 0px;

    padding: 0px;

    display: -moz-inline-stack;

    display: inline-block;

    vertical-align: top;

    zoom: 1;

    *display: inline;

    }

  11. №1390
    Sam
    Sam 18 марта 2009 г., 19:30:53

    Страничку показать можно?

  12. №1391
    Sgustok Design
    Sgustok Design 18 марта 2009 г., 20:44:20

    вот по это ссылке:

    http://www.sgustok.org/archive/demo/demo.html

    там ненужный пробел между блоками content-right-music

  13. №1393
    Шмель
    Шмель 19 марта 2009 г., 16:35:36

    Очень помогло, спасибо.

  14. №1396
    Sam
    Sam 19 марта 2009 г., 20:18:47

    Sgustok Design

    Прибить пробелы между div-ами.

  15. №1397
    Sgustok Design
    Sgustok Design 19 марта 2009 г., 21:49:18

    Подскажите пожалуйста как это сделать

  16. №1421
    Sam
    Sam 26 марта 2009 г., 13:04:39

    Sgustok Design

    М… ну, чтобы было вот так:

    <div></div><div></div>

    а не так:

    <div></div>
    <div></div>
  17. №1424
    Nometa
    Nometa 27 марта 2009 г., 13:58:10

    Все хорошо, но в некоторых браузерах или старых версиях появляются глюки. Съезжают все в один столбец...

    Но статья все равно дельная.

  18. №1547
    Denis
    Denis 29 апр. 2009 г., 11:42:56

    СПАСИБО вам большое! =) Я уж хотел заново верстать макет, а все оказывается решается просто и валидно!

    Впервые от вас узнал о hasLayout, множество проблем верстки сразу же решилось...

  19. №1701
    WebMechanic
    WebMechanic 02 июля 2009 г., 20:03:32

    Статья - супер. Обманул всё семейство "Ослов"! Спасибо.

  20. №1861
    Geniy
    Geniy 27 сент. 2009 г., 18:33:42

    Спасибо все действительно работает , _overflow:hidden; спасает старые ие !!! Удачи

  21. №2187
    Рожков Дмитрий
    Рожков Дмитрий 21 янв. 2010 г., 16:30:06

    Спасибо!

  22. №2595
    Олег
    Олег 28 мая 2010 г., 16:47:03

    отлично! Спасибо большое за сей приём!

  23. №5656
    Илья
    Илья 10 дек. 2011 г., 5:37:35

    Заработало!

  1. Почта опубликована не будет.

  2. Можно использовать синтаксис Markdown или HTML.

  3. Введите ответ в поле. Щёлкните, чтобы получить другую задачу.