Вы здесь

WEB - Заметка на память

Когда делаешь сайт приходится помнить кучу мелочей. Эта куча делает жизнь интересной и неожиданной.
Элементы WEB - страниц делятся на блоковые и строчные. Строчные размещаются на странице в одной строке, блочные — каждый в новой. Но иногда есть необходимость, что бы блочные элементы размещались так же, как и строчные. Для этого есть директива CSS: display. Добавляем в стиль: display: inline-block; и все замечательно.

Но, всегда есть это «НО».

Internet Explorer чихал на эту директиву. Для того, что бы информация корректно отображалась в IE нужно указать ещё одну директиву, по этому добавляем: float: left;.

Другие браузеры не возражают и продолжают размещать элементы правильно, «в одной строке». Но опять присутствует «НО». Появление в описании стиля директивы float: left;, приводит к вырождению по высоте родительского элемента, и расположенные ниже него элементы начинают перекрывать его содержимое...

Для решения этого в просторах Интернета нашёл следующие рекомендации:

Цитата:
#content-id .parent-block:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

#content-id .parent-block {
display: inline-block;
}

html[xmlns] #content-id .parent-block {
display: block;
}

* html #content-id .parent-block {
height: 1%;
}

#content-id .parent-block — идентифицируют родительский элемент для элементов с директивой float

статистика

  Яндекс.Метрика Яндекс цитирования