Кросбраузерні Inline-Block
19 Червень, 2010
Часто в PSD макетах зустрічаємо отакі блоки. Всьо чотко дизайнер меледец квадратики малювати вміє, ну а як скажемо зверстати того дідька шоб серцю було мило і браузер схавав?
Знов таблиці?, а фіґ..
Поки закипає чайник, сідаєм і розгрібаєм проблему. Шо ми маєм, як правило, здається такий макета буде легкою прогулянкою. Фіксована ширина, фіксована висота, чіпаєм флоат: вліво, профіт? Buuuuut, конструкція повинна працювати зі змінним кількістю контенту шо зачіпає, якщо один з цих блоків має більше змісту, ніж інші, то получається ніщо інше як лажа, через вищий перший елемент, п’ятий сповзає.
Як вийти з такої ситуації? Будемо експериментувати, наприклад, із маркованими списками і властивістю inline-block.
<ul>
<li>
<h4>Block1</h4>
<img src="#" alt="img" width="75" height="75"/>
</li>
...
</ul><ul>
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: inline-block;
margin: 5px;
}
</style>
Так це виглядає в Firefox 3, Safari 3 і Opera:
Очевидно, вертикально тут точно шось не то. Ну, не зовсім так, тому що це нормальна поведінка, но поки не торт. Отже йдем запарюємо каву і шустримо далі, вся сіль ховається в тому що <li> вирівняний по baseline батьківського <ul>.
Вирівнювання по baseline йде по замовчування, отже простим рішенням буде використати vertical-align:top, це виправить ситуацію:
Но не працює в Firefox 2, IE 6 і 7.
Це нас не зупиняє,для початку розберемося з фаєрфоксом. Firefox 2 не підтримує inline-block, но в Mozilla є -moz-inline-stack, це фактично еквівалент inline-block. Зробимо костиль, браузери які підтримують inline-block будуть пропускати його і нормально реагувати на наступний.
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
}
</style>
Опісля получається ой)) чо не знаю но діви рішають.
<li> <div> <h4>block1</h4> <img src="#" alt="img" width="75" height="75"/> </div> </li>
<div> кагбе ресетить всьо в середині <li>, здається тепер всьо ок:
Лишився IE7 який тоже не дружить з inline-block, для нього є рішення у вигляді zoom:1; і хака з зірочкою:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
}
</style>
Ґуден, тепер залишилось порішати IE6, він не розуміє min-height, вставимо хак _height: 250px; нормальні браузери пропустять таке, ІЕ6 схаває і всім буде добре.
Так кава допита і шо ж в нас получилось, а шось таке получилось:
<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
zoom: 1;
*display: inline;
_height: 250px;
}
</style>
<li>
<div>
<h4>Block 1</h4>
<img src="#" alt=img" width="75" height="75"/>
</div>
</li>
Здерто з хабра
На хабрі доречі був комент про ше одний класний старий метод описаний чуваками із студії Лебедева