CSS Guru

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

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

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

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

Если же нет и вы пользуетесь �?Е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 с вашего собственного сайта.