Есть у ИЕ6 такая особенность: если какому-либо блоку задать ширину, то ИЕ6 воспринимает эту ширину, как минимально возможную и, если содержимое блока оказывается шире заданной ширины, то ИЕ6 растягивает блок до размеров содержимого. Тогда как другие браузеры, в полном соответствии стандартам сохранят указанную ширину, а содержимое просто покажут выступающим за пределы блока (если не указано свойство overflow, отличное от значения visible (значение по умолчанию)).

Выглядит это как-то так

Наш контейнер шириной в 200 пикселей
Вложенный элемент (пусть тоже будет DIV) шириной в 250 пикселей

Поместим второй DIV внутрь первого

Наш контейнер

Вложенный элемент (пусть тоже будет DIV) шириной в 250 пикселей

шириной в 200 пикселей

Если ваш браузер поддерживает стандарты в полной мере, то вы увидите

иллюстрация стандартного поведения браузера - родительский элемент сохраняет указанную ширину, не обращая внимания на ширину контента
иллюстрация стандартного поведения браузера - родительский элемент сохраняет указанную ширину, не обращая внимания на ширину контента

Если же нет и вы пользуетесь ИЕ6 или даже еще более ранней версией Инернет Експлорера , то вашим глазам предстанет следущая картина

иллюстрация поведения ИЕ6 - браузер растягивает элемент по ширине содержимого
иллюстрация поведения ИЕ6 - браузер растягивает элемент по ширине содержимого

Как видите ИЕ6 растянул родительский контейнер по ширине содержимого.

Чтобы этого не происходило добавим внутрь контейнера еще один блок.

HTML


<div class="parent">
Наш контейнер
    <div class="wie6">
        <div class="child">
        Вложенный элемент
        (пусть тоже будет DIV)
        шириной в 250 пикселей</div>
    </div>
шириной в 200 пикселей
</div>

И зададим указанным классам следующие свойства

CSS


<style type="text/css">
.parent {
	background:#afa;
	border:1px solid #000;
	width:200px;
}
.child {
	background:#aff;
	border:1px solid #f00;
	width:250px;
}
/* trick */
.wie6 {
	margin-right:-999px;
	position:relative;
	width:100%;
}

Откроем пример в ИЕ6 и о чудо. Родительский контейнер сохранил свою ширину в целости, а вложенный блок не обрезался и никуда не пропал

Наш контейнер

Вложенный элемент (пусть тоже будет DIV) шириной в 250 пикселей

шириной в 200 пикселей

Предлагаемый способ не идеален (а есть ли другой?) и требует дополнительной разметки. Но на что не пойдешь, чтобы уважить пользователей ИЕ6.

: 1 комментарий

  1. очень пригодилось, сейчас тему для вп верстаю и врапер все вылезает не туда куда нужно

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *