FoxWeb

софт для студентов

Рецепты вёрстки. Кроссбраузерный inline-block

Раздел: Интернет, веб-технологии Автор: Антон Грахов
E-mail: спаму - нет! Www: http://grakhov.com
Просмотров: 18167 Дата: 24.04.2009
Перевод статьи http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block

Давно я по этой теме ничего не постил. Сегодня будет перевод статьи, которая 2 месяца назад была опубликована в блоге Мозиллы. Она про эмуляцию табличного поведения блоками с помощью display: inline-blockЯ еще тогда хотел её перевести, но было лень. Итак, поехали.

Ох уж это выравнивание блоков в одну линию, столь красиво выглядещее на экране, но с которым так много проблем. Достаточно часто ко мне поступают PSD-файлы следующего вида:

Gallery Design

и я готов расплакаться.

Как правило, выставляется фиксированная ширина, высота и каждому элементу float: left. Но по дизайну каждый элемент может иметь разное количество контента, что приведет к разрыву верстки:

Broken Layout with float:left

Поскольку 1-ая картинка в этой галерее длиннее, чем остальные, то 5-ая картинка, начинающая следующую строку, будет обтекать ее. По сути нам нужна растягивающаяся таблица, но в семантической разметке.

Начнем с того, что создадим ненумерованный список, и присвоим элементам этого списка display: inline-block;

<ul>
<li>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</li>
...
<ul>

<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: inline-block;
margin: 5px;
}
</style>

И это будет хорошо выглядеть в браузерах Firefox 3, Safari 3 и в Opera:

Step 1

Очевидно, что что-то не так с вертикальным выравниванием. На самом же деле это правильное поведение (inline-элемента, прим. переводчика), но это не то, что нам нужно.

Так что же происходит с базовой линией (baseline) всех элементов <li>, когда они были выровнены по базовой линии элемента <ul>? И что вообще такое «базовая линия», спросите вы. Лучше один раз увидеть, чем сто раз услышать:

Baseline

Вот как раз та линия, подчеркивающая текст, и называется базовой. По умолчанию значение вертикального выравнивания у элемента inline или элемента inline-block равно baseline, что означает, что базовая линия этих элементов будет совмещена с базовой линией родительского элемента. Ниже проведена базовая линия для нашего примера:

Baseline illustration

Как вы видите, базовая линия каждого элемента совпадает с базовой линией текста “This is the baseline”. Этот текст не помещён в элемент <li>, просто он так же находится внутри элемента <ul> (с семантической точки зрения так делать нельзя, прим. переводчика), который для всех элементов внутри него является базовым.

Во всяком случае, эту проблему легко устранить, выравнив все дочерние элементы по верхнему краю с помощью vertical-align: top. В результате получаем то, что нужно:

Inline block 2

Но это еще не будет работать в браузерах Firefox 2, IE 6 и 7:

inline-block-ff2

Начнем с Firefox 2.

Этот браузер не поддерживает inline-block, зато поддерживает специфичное -moz-inline-stack, которое даёт аналогичный эффект. И когда мы добавляем его до display: inline-block, FF2 проигнорирует второе объявление и будет использовать -moz-inline-stack, так как не поддерживает значение inline-block. Браузеры, понимающие inline-block будут использовать его и проигнорируют свойство со специфичным только для FF значением.

<style>
li {
width: 200px;
min-height: 250px;
border: 1px solid #000;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
margin: 5px;
}
</style>

К сожалению, у решения есть небольшой баг:

Inline Block in Firefox 2

Честно говоря, я не знаю, чем вызван этот баг, но зато предлагаю вам простое решение этой проблемы. Необходимо содержимое каждого элемента <li> завернуть в <div>:

<li>
<div>
<h4>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>

Это выглядит как «сбрасывание» (reset) всего внутри элементов <li> и делает их отображение правильным.

Inline block 2

Добрались до IE 7. Этот браузер так же не поддерживает inline-block, но мы можем использовать трюк, позволяющий выводить элементы <li> также, как если бы мы использовали тот самый inline-block. Как? HasLayout, магическое свойство IE, позволяющее решать многие проблемы. Вы не можете явно задать этот самый HasLayout, написав что-то вроде HasLayout: true, или что-то наподобие этого, но вы можете задать его другими путями, например с помощью zoom: 1.

Результатом использования hasLayout является элемент, с установленным hasLayout в true, влияющим на вывод этого элемента и его дочерних элементов (совместив это с минимальной высотой и шириной, получаем нечто похожее на display: block). В некоторых ситуациях достаточно всего лишь навсего использовать hasLayout и проблема сама исчезает.

Когда мы добавили zoom: 1 и *display: inline (star hack для IE 6 и 7) к элементам <li>, мы заставили в IE 7 вести себя их так, как если бы они были строчными (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;
zoom: 1;
*display: inline;
}
</style>

inline-block-ie7

Уф! Почти разобрались. Осталось только IE 6 образумить:

inline-block-ie6

IE 6 не поддерживает указание минимальной высоты, но благодаря неверной работе этого браузера с высотой, мы можем обойти эту проблему. Зададим _height (IE6 underscore hack) в 250px дающую всем элементам <li> высоту в те самые 250px, и если контент превышает эту высоту, то блок будет растягиваться по высоте, чтобы вместить этот контент полностью. Все другие браузеры будут игнорировать указанную таким образом высоту.

Итак, после всей проделанной нами работы взглянем на окончательный CSS и HTML:

<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>This is awesome</h4>
<img src="http://farm4.static.flickr.com/3623/3279671785_d1f2e665b6_s.jpg"
alt="lobster" width="75" height="75"/>
</div>
</li>

Вот в принципе и вся статья. Кроме оригинала статьи, можно там же почитать и комменты к ней.

Комментарии

JossastacyJB 17.07.2019 10:59:23 #

Proxy SOCKS
dubopixiveef 21.07.2019 00:43:39 #
http://mewkid.net/order-amoxicillin/ — Buy Amoxicillin Buy Amoxicillin Online zln.wfun.ir-design.ru.zpe.gt http://mewkid.net/order-amoxicillin/
aiudawerexoqi 21.07.2019 00:45:14 #
http://mewkid.net/order-amoxicillin/ — Buy Amoxicillin Amoxil Children gxh.tosu.ir-design.ru.eay.jn http://mewkid.net/order-amoxicillin/
oyopoqexgitik 21.07.2019 01:07:52 #
http://mewkid.net/order-amoxicillin/ — Amoxicillin 500mg Capsules Amoxicillin tmm.txdg.ir-design.ru.kcs.wd http://mewkid.net/order-amoxicillin/
almibinoyon 21.07.2019 01:15:12 #
http://mewkid.net/order-amoxicillin/ — Buy Amoxicillin Amoxicillin lga.gpvj.ir-design.ru.roa.tc http://mewkid.net/order-amoxicillin/
JossastacyJB 22.07.2019 13:35:53 #

Checker
KenaShaksTG 23.07.2019 02:36:08 #

Всё просто — Для получения вашего кэшбэка Нужно лишь зарегистрироваться затем, прямо со страницы сервиса перейти в выбранный магазин, отправить нужные товары в корзину, оплатить и получить кэшбэк. Всё просто.
Нет необходимости регистрироваться, каждый раз перед покупкой, даже если вы решите сделать покупки много времени спустя, для получения КэшБэка, просто заходите в свой кабинет и от туда переходите в нужный магазин или можно установить расширение для браузера которое сделает шопинг ещё проще, сразу подскажет есть ли на выбранный вами товар возврат денег, и сколько.

Установив расширение нет необходимости заходить в свой кабинет, можно перейти сразу на сайт магазина, а иконка расширения сообщит о возможности возврата и его размере.
Как говорится, сэкономил значит заработал. И кстати, постоянные клиенты получают ещё больший процент возврата денег от своих покупок.
EllsokeKC 23.07.2019 18:51:24 #
What Is Cephalexin Prescribed For Amoxicillin And Hives Vous Peut Durer Plus Longtemps cialis vs viagra Propecia Causes Impotence Fluoxetine Obsessive
canadianpharmacyndaf 18.08.2019 10:52:26 #
canada drug pharmacy canadian pharmacy generic viagra canadian pharmacy meds
StuqtaigoQQ 27.08.2019 02:05:18 #

Разработка СТУ экспертиза всех планировочных решений сооружения;
YonqhutTN 28.08.2019 06:08:23 #

Hacker Forum Творческая Лаборатория DedicateT
YonqhutTN 30.08.2019 21:34:33 #

Хакерский Форум Творческая Лаборатория DedicateT
StqqtaigoPY 04.09.2019 00:21:56 #

No Time To Write Your Essay? ?? Experts from StudentShare are ready to help you with writing, editing or rewriting your paper!
YonqhutTN 06.09.2019 22:58:00 #

Hacker Forum "Творческая Лаборатория DedicateT"
LetataigoXI 09.09.2019 09:27:43 #
Узнайте что Вас ждет в ближайшем будущем! Бесплатные онлайн гадания на ситуацию прямо сейчас!
YonqhutTN 10.09.2019 05:53:05 #

Hacker Forum "Творческая Лаборатория DedicateT"
ff 17.09.2019 00:27:36 #
Что тут за дич тварится!!1
ff 17.09.2019 00:27:59 #
Что тут за дич тварится!!1
BtcataigoTS 18.09.2019 15:56:47 #

Стабильный обмен https://enter-change.com/ электронных денег
YonqhutTN 01.10.2019 23:00:43 #
"Творческая Лаборатория DedicateT"
YonqhutTN 09.10.2019 19:46:57 #

Hacker Forum "Творческая Лаборатория DedicateT"
JosistacyCT 11.10.2019 21:57:59 #
Творческая Лаборатория DedicateT
YonqhutTN 13.10.2019 14:40:53 #

Хакерский Форум "Творческая Лаборатория DedicateT"
JosistacyCT 26.10.2019 22:19:33 #

Раздача дедиков RDP Сервер Dedicated
JosistacyCT 28.10.2019 02:08:30 #

YonqhutTN 05.11.2019 10:11:14 #

Хакерский Форум "Творческая Лаборатория DedicateT"
JosistacyCT 07.11.2019 13:33:41 #

Ключи nod32 ESET NOD32 все версии Антивирус
JosistacyCT 15.11.2019 22:15:46 #

Ключи nod32 ESET NOD32 все версии Антивирус
YonqhutTN 16.11.2019 02:03:57 #

Лучший Хакерский сайт "Творческая Лаборатория DedicateT"
YonqhutTN 16.11.2019 20:44:26 #

Лучший Хакерский сайт "Творческая Лаборатория DedicateT"
YonqhutTN 19.11.2019 05:41:35 #
"Творческая Лаборатория DedicateT"
YonqhutTN 25.11.2019 06:13:49 #
Лучший Хакерский Форум,"Творческая Лаборатория DedicateT", Приветствует Вас! Заходи, если хочешь познать, черную сторону интернета!Творческая Лаборатория DedicateT
Best Hacker Forum, DedicateT Creative Lab, Welcomes You! Come, if you want to know, the black side of the Internet! Creative Laboratory DedicateT
YonqhutTN 26.11.2019 03:06:12 #
Лучший Хакерский Форум,"Творческая Лаборатория DedicateT", Приветствует Вас! Заходи, если хочешь познать, черную сторону интернета!Творческая Лаборатория DedicateT
Best Hacker Forum, DedicateT Creative Lab, Welcomes You! Come, if you want to know, the black side of the Internet! Creative Laboratory DedicateT
4rdpWeanoRN 30.11.2019 16:08:47 #
индивидуалки
BalkonGetxdpqusJP 30.11.2019 23:53:03 #
остекление и утепление балконов и лоджий цена в химках
gessabemEF 05.12.2019 08:56:30 #
cvv dumps free
gessabemEF 06.12.2019 15:01:24 #
Полезное
gessabemEF 07.12.2019 16:29:35 #
Forbidden
JosistacyCT 16.12.2019 10:04:38 #

Ключи nod32 ESET NOD32 все версии Антивирус
JosistacyCT 17.12.2019 11:16:36 #

Создаем скрытую, учетную запись на дедике
BalkonGetsrxyouJP 19.12.2019 15:43:20 #
утепление балкона базальтовой ватой на бетон
asegojira 20.12.2019 19:59:37 #
http://mewkid.net/where-is-xena/ — Amoxicillin 500mg Capsules Amoxicillin 500mg Capsules spl.letu.dev.kurepin.com.gdr.vp http://mewkid.net/where-is-xena/
ubefogoredole 20.12.2019 20:35:45 #
http://mewkid.net/where-is-xena/ — Amoxicillin Without Prescription Buy Amoxicillin bya.ilgm.dev.kurepin.com.ezv.fe http://mewkid.net/where-is-xena/
tryShaksHM 28.12.2019 09:56:29 #

Прокат авто в Краснодаре — https://amd-motors.ru/
Хотите арендовать автомобиль в Краснодаре у надежной компании по низкой цене? Предлагаем вам услуги нашего сервиса проката машин без водителя.
+79182888891
RobertShumsWJ 04.01.2020 22:55:59 #
порно секс соревнование картинки порно ролевые игры Бесплатное порно любительское смотреть онлайн Порно с фермером nimfa viola порно смотреть детский инцест порно Порно русских хорошем качестве Порно инцесты с мамочками
чешки в порно за деньги порно бесплатно смотреть узбечка Секс порно с конем онлайн бесплатно Порно пазлы скачать порно скрытая камера кавказцы рубаки аниме сериал Новое порно с анной шупиловой Накаченные жопы порно видео
порно секс брюнеток девушка мастурбирует на пляже. видео Порно похотливая внучка Порно молодые трахаются смотреть онлайн бесплатное порно с зрелыми мамками москвички в порно Аниме хентай на русском языке смотреть онлайн Wow порно игра
порно школьном автобусе пробуем с женой анальный секс Бесплатное анал порно первый раз Порно мать ебет свою дочь дебби уайт порно шеф повар порно Порно hd вечернее платье Не успел вытащить порно видео
что делать чтобы парень быстро не кончал порно фото гей фистинг Фото огромной вагины Бдсм геи скачать зрелые женщины порно вконтакте фото настя короткая порно фото Аниме импульс валькирии русалка 2 сезон Порно в городе перми
аниме бои играть домашнее порно пьяные смотреть бесплатно Лесбиянки ххх видео онлайн Порно игры анус порно ass mature одноклассницу порно скачать Порно ролики для андроид смотреть онлайн Анал со зрелыми блондинками
порно супруги меняются голубые и женщина порно В контакте дочка порно Маски купить аниме порно видео трахается с конем секс видео папа и дочка китай Порно с молоденькими милашками Порно видео в офисах русское
видео мастурбация под партой подглядывание порно без регистрации Как снимаются в порно фильмах Пьяные студентки видео секс домашнее порно русское пары порно видео табу 2 Порно онлайн у вудмана Жесткое порно гигантские члены
RobertShumsWJ 05.01.2020 01:04:44 #
порно сайт лесбиянки смотреть изнасилование русских школьниц порно Секс видео москвичек Автобусе порно смотреть бесплатно шеф повар порно esperanza gomez hd порно 3d лоликон порно игры Красивые пилотки видео девушек
аниме драма романтика список смотрите порно видео бесплатно Скачать порно видео китайский Картинки порно ролевые игры просто порно папа лесбиянки ебутся порно видео Порно большие предметы в дырках Зрелая писька порно
порно торрент порно отец и дочь дрочат клитор видео Дородные женщины порно Связь найдут только избранные аниме порно инцест куни фото группа на природе смотреть порно Видео член не влазит Русское порно для семьи
девушка и старый дед порно бесплатное видео порно в домашних условиях Русское порно большие хуй Девушки из плейбоя порно видео секс на женской зоне бабы раком фото ххх Гей порно мускулистые качки Видео малолетка мастурбирует вк
на рынке порно рассказ смотреть домашнее порно в одежде Домашнее секс видео смотреть онлайн порно Русское порно измена жены реальное порно одноклассник аниме смотреть онлайн на русском минет в школе порно видео Лошади и бабы порно видео Усыпил попутчицу порно
смотреть порно с валентиной рубцовой порно мамочки большие сиськи и жопы Самые сладкие вагины Аниме порно с сисястой мультики эротика в контакте порно все категории нарезки Бдсм в подъезде Порно видео секс под столом
порно мультфильм 23 mrs doe tornado 800x белокурая блондинка порно Порно сирийские девушки Анус после члена порно ганг банг компиляции снятое на телефон русское порно онлайн Секс с животными секс ххх видео Злое порно онлайн
порно негров с большими порно два хуя в очко Смотреть порно онлайн по порно актрисам Даму ебут порно играть что за аниме детское порно в попу Смотреть анал с красотками Порно 70-х с сюжетом
RobertShumsWJ 05.01.2020 15:51:33 #
классные сосочки порно Смотреть порно с русской тетей
порно фильмы про измену смотреть онлайн Видео раздеть девушку
порно самое красивое с большими сиськами Как вернуть девушку когда шансов нет
порно видео эндрю битони Смотреть порно анал на кухне
MerillGexFW 07.01.2020 02:17:51 #
НОВОЕ ОБЩЕЖИТИЕ В МОСКВЕ 180 РУБЛЕЙ В СУТКИ!

Предложение от СОБСТВЕННИКА, без комиссии и переплат, скидка при долгосрочном проживании!

Наше общежитие — отличный вариант для комфортного проживания:

- БЕСПЛАТНЫЙ Wi-Fi;
- ортопедические матрасы;
- простоpная оборудованная кyхня;
- круглосуточная охрана, сухой закон;
- ежедневная уборка и смена белья.
- душ;
- холoдильник в кoмнате;
- тeлевизор;
- микpoвoлновая печь;
- электpическaя плита c вытяжкой;
- стиральнaя машина.

ЗВОНИТЕ 8 499 638 29 41, КРУГЛОСУТОЧНО и БЕЗ ВЫХОДНЫХ!
 hotelhot.ru





койко место в общежитии
MerillGexFW 08.01.2020 23:44:10 #
НОВОЕ ОБЩЕЖИТИЕ В МОСКВЕ 180 РУБЛЕЙ В СУТКИ!

Предложение от СОБСТВЕННИКА, без комиссии и переплат, скидка при долгосрочном проживании!

Это безусловно лучшее сочетание «ЦЕНА-КАЧЕСТВО» для размещения в ближайшем Подмосковье. Общежитие расположено в 2-х отдельно стоящих зданиях и рассчитано на 716 мест.
Общежитие «ХотелХот Шереметьево» придется по вкусу, прежде всего, тем, кто ищет постоянное место проживания в Подмосковье по умеренной цене. В общежитии выполнен высококлассный современный ремонт.
Наши постоянные клиенты — это те люди, которые приезжают в Москву на заработки и для которых важно жить с комфортом в облагороженных районах Москвы и ближнего Подмосковья.
КОМНАТЫ:
От 2-х местных до 22-х местных.

УДОБСТВА:
У нас в общежитии есть все, что нужно для комфортного проживания:
- бесплатный Wi-Fi,
- ортопедические матрасы,
- душевые комнаты,
- туалеты,
- кухни, оборудованные всей необходимой техникой:
- холодильники,
- микроволновая печь,
- электрическая плита с вытяжкой,
- профессиональные стиральные машины,
- место для курения,
- уборка, смена белья (бесплатно),
- комнаты оборудованы двухъярусными кроватями, шкафами для одежды, прикроватными тумбочками, столами и стульями. В некоторых комнатах есть телевизоры и холодильники.

РАСПОЛОЖЕНИЕ:
Адрес общежития: Московская область, Солнечногорский район, сельское поселение Луневское, д. Дубровки, улица Аэропортовская, строение №7.
Общежитие находится в пяти минутах ходьбы от автобусной остановки «Дубровки», от которой курсируют автобусы до ж/д станции «Лобня».
На автобусах также можно добраться до аэропорта «Шереметьево».
Рядом с общежитием: продуктовый круглосуточный магазин.


Как до нас добраться!? Общежитие Хотелхот «Шереметьево»

Вариант 1.
От метро «Речной вокзал» (ориентируемся на последний вагон) сесть на автобус № 851. Доехать до остановки « ГОСНИИГА»(Государственный научный институт гражданской авиации), далее перейти на противоположную сторону , и
1.1 От остановки идти пешком через д. «Исаково» 1.8 км до общежития.
1.2 Дождаться автобуса № 48 ( до Дубровки) доехать до конечной и от магазина до общежития 200 метров пройти пешком.

Вариант 2
От метро « Савеловская или «Тимирязевская» на электричке доехать до станции «Лобня», далее нужно выйти к автобусам и сесть на автобус № 48 (до Дубровки) ехать до конечной и от магазина до общежития 200 метров пройти пешком.



ЗВОНИТЕ 8 499 638 29 41, КРУГЛОСУТОЧНО и БЕЗ ВЫХОДНЫХ!
 hotelhot.ru






общежитие в москве метро выхино
MerillGexFW 18.01.2020 04:10:00 #
ПОРТФОЛИО МОДЕЛЯМ В МОСКВЕ ОТ 800 РУБЛЕЙ!

Предложение от СОБСТВЕННИКА, без комиссии и переплат, скидка при долгосрочном сотрудничестве!

Сеть фотосалонов ФОТОРАДУГА — отличный вариант для Модельного портфолио:

Модельный бизнес подразумевает собой очень жесткую конкуренцию. У моделей небольшой промежуток...

ЗВОНИТЕ +7 (495) 369-21-25; +7 (495) 684-56-68; +7 (985) 442-29-68;, c 9-20 и БЕЗ ВЫХОДНЫХ!
http://photoraduga.ru/portfolio-modelyam/

Печать фото в Фоторадуге
MerillGexFW 20.01.2020 07:49:08 #
СЕМЕЙНОЕ ПОРТФОЛИО В МОСКВЕ ОТ 800 РУБЛЕЙ!

Предложение от СОБСТВЕННИКА, без комиссии и переплат, скидка при долгосрочном сотрудничестве!

Сеть фотосалонов ФОТОРАДУГА — отличный вариант для Семейного портфолио:

Семейное портфолио это сформированный в книгу альбом, состоящий из фотографий членов...

ЗВОНИТЕ +7 (495) 369-21-25; +7 (495) 684-56-68; +7 (985) 442-29-68;, c 9-20 и БЕЗ ВЫХОДНЫХ!
http://photoraduga.ru/semejnoe-portfolio/

Кружки цветные в Фоторадуге

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

Ваше имя

Ваш комментарий

Код   Защитный код. Если вы не видите здесь рисунок - обновите страницу.
Оценка   

Заметки по этой теме