CSS Guru

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

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

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

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

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

Если же нет и вы пользуетесь ИЕ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 и о чудо. Родительский контейнер сохранил свою ширину в целости, а вложенный блок не обрезался и никуда не пропал

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

Метки: верстка, азы css, азы верстки

Запись создана: Четверг, 23 Апрель 2009 в 21:33 и находится в рубриках CSS. Вы можете следить за комментариями к этой записи через ленту RSS 2.0. Вы можете оставить отзыв, или trackback с вашего собственного сайта.