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 по email OK

№834

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*/

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

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

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

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

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

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

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

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

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

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. Любые предложения по модернизации вёрстки пишете на [email protected].
№1143

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

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

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

display:-moz-inline-stack;

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

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

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

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

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

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

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

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;

}
№1390

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

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

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

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

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

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

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

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

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

Sgustok Design

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

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

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

Sam 26 марта 2009 г., 13:04:39
Sgustok Design

М… ну, чтобы было вот так:
```
<div>…</div><div>…</div>
```
а не так:
```
<div>…</div>
<div>…</div>
```
№1424

Nometa 27 марта 2009 г., 13:58:10

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

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

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

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

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

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

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

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

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

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

Спасибо!
№2595

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

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

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

Заработало!