cssor.ru - Сайт о CSS и верстке сайтов, в помощь веб разаботчикам.

position: relative, баг в IE

Дата: 05.10.2008
position: relative, баг в IE

Эх сколько я мучился с ним в свое время ). Этот баг обычно возникает когда слой (div) имеет position: relative; и имеет дочерний слой или же еще какие либо элементы внутри себя. Но иной раз его сложно заметить, бывает он то появляется, то исчезает при скроллинге страницы. Я расскажу и покажу этот баг на простом примере, и естественно расскажу как он “лечится”.


Например имеем два слоя, один вложен в другой:

<div class="parent">
<div class="child">
И тут охотник как выстрелит в зайца!!!
</div>
</div>

И стили CSS:

.parent {
position:relative;
width:200px;
border:black 1px solid;
}
.child {
position:relative;
border:red 1px solid;
margin:-1px;
background: white;
padding:5px;
}

Поясню… Родительский слой (.parent) имеет position:relative; и рамку черного цвета (border:black 1px solid;). Дочерний слой (.child) так же имеет position:relative; и рамку, но уже красного цвета (border:red 1px solid;). Так же мы указали позиционирование дочернего слоя margin:-1px; тем самым он должен равномерно расшириться во все стороны ровно на 1px и перекрыть родительский слой. То есть красная рамка дочернего слоя полностью должна перекрыть черную рамку родительского слоя. В Opera и FF именно так и происходит, а в IE левая сторона рамки все равно остается черной, Пример.

Пример бага

В данном примере баг виден во всех версиях IE, включая IE 8 betta. Но обычно на практике он вылазит в IE 6 и может проявлять себя только при скроллинге страницы. Так что будьте бдительны.

Решение проблемы

Все очень просто… Вставляем в слой с position:relative; еще одно свойство zoom:1; и все. Это свойство IE, позволяет увеличивать или уменьшать страницу, но в таком виде используется для установки hasLayout.

Теперь наш CSS код выглядит так:

.parent {
position:relative;
width:200px;
border:black 1px solid;
}
.child {
position:relative;
border:red 1px solid;
margin:-1px;
background: white;
padding:5px;
zoom:1;
}

Теперь IE отображает страницу так как нам надо. Результат.


Данный пример демонстрирует баг в IE от применения position:relative;. В реальной практике он может проявляться не во всех версиях IE и иногда только при скроллинге страницы. Просто будьте внимательны и тестируйте ваши сайты во всех версиях IE начиная с 6 версии.

22.10.2008

Спасибо, полезно! А Вы не могли бы написать как сделать УЗКИЙ дизайн (2-х или 3-х колоночный) в дивах и чтобы футер прилипал книзу. Заранее спасибо!!!

22.10.2008

C 2-х колоночным как правило проблем не возникает, об этом очень много написанно Гугл и Яндекс вам в помощь. 3-х колоночный это по сути 2 2-х колоночных, где один вложен в другой, тоже ниче сложного если понимать принцып. Вообще есть в планах написать про макеты "разноколоночные", но когда это будет сделанно сказать точно не могу.

22.10.2008

У меня собственно говоря проблема в том что делаю сайт по верстке похожий на друпал.ру (футер прилипает к низу 2 колонки на дивах одинаковой высоты) - это все я сумел реализовать, НО! это работает, если сайт шириной 100%, а если сделать задний фон + ширина фиксированная (например, 850px) то возникает проблема - если высота колонок не большая, футер прилипает к низу, а место между футером и колонками заполняет задний фон. Код могу показать, пробовал уже все известные мне способы результат один и тот же. Буду очень благодарен, если сможете помочь, да и статья получиться из этого не плохая.

22.10.2008

Я обычно делаю "min-height" колонок, но ваш вариант интереснее ). Сверху в меню нажмите на "О проекте", там есть емайл. Скиньте архив с вашим макетом на тот емайл, я на досуге посмотрю. Сразу говорю ничего не обещаю, посмотрю как будет время.

29.11.2008

Все прелестно. Но Ваши "вылазиЕт" и "принцЫпе" напрягают. Кроме СSS, неплохо бы еще русский язык подучить... Или проверяйте орфографию программно.

08.01.2009

margin:-1px; зачем? ведь убрали же элемент из нормального потока

01.02.2009

Спасибо за информацию!!!

18.02.2009

спасибо за жизненные советы)

28.03.2009

не раз стралкивался с этой проблемой, спасибо!

07.05.2009

rufus, а в чем проблема с 2-3 колонками и подвалом? это же стандартно....
admin, "3-х колоночный это по сути 2 2-х колоночных, где один вложен в другой" - тут не соглашусь, немного не так...если интересно, могу расписать поподробнее...

хотя методика у всех разная..

29.06.2009

Никогда не встречался с таким, может еще зависит от доктайпа? Я встречался с некоторыми багами с исчезновением элементов при прокрутке, и в моем случае это было только в ие6 и ие7. Решалось всё свойством height. в 6-м - height:0; в 7-м height:100%; А зум стремное свойство =).

31.07.2009

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

01.08.2009

Зачем же терпеть баг, если его предлагают так легко исправить?

06.09.2009

Приятно что делитесь тут своим опытом,продолжайте в том же духе.
Плохо конечно,что нет единого отображения различных элементов кода на разных браузерах,стандарта так сказать.Не обязательно на всех,но на таких популярных как IE и мазила отличатся это не должно.

04.11.2009

Как всегда детище майкрософт с кучей багов, если бы можно было ставить фильтр чтобы заходить можно было только с оперы и так бы и делали, то вебмастерамы скок бы работы уменьшалось.

21.11.2009

Хорошее решение, спасибо!

24.11.2009

Один баг исправим, а сколько их останется?

24.11.2009

В IE их немеряно!

24.12.2009

Интересные баги, надо будет воспользовацца =)

14.01.2010

Главное для новичков это узнать все без мусора в статье о том как сделаь чтобы была прибыль с инета. в вашей статье есть эта базовая информация. А насчет того что лучше делать сайты не простые, а правильно заточенные под заработок с них, иначе это будет не заработок а так баловство, хобби

14.01.2010

Совет “напоследок” на самом деле очень правильный. Чтобы заработать в интернете гораздо легче сделать тематический контентный проект (тематика может быть любая, главное чтобы вы были в теме, тогда работа упрощается до минимума).

15.10.2010

Если бы мне каждый раз давали доллар когда я вижу в сети фразу "баг в ІЕ" то я уже бы был на карибах.. или нет, карибы были бы моими :)

25.11.2010

Спасибо за "zoom:1". Помогло побороть в ие проблему "пропадания" блока

30.12.2010

В принципе согласен, спасиб за инфу, баг исправлен :)

08.10.2011

Как правило, отделочные работы, как внутренние, так и наружные, требуют достаточно существенных затрат, из-за необходимости выравнивать стены и потолки. Однако, при использовании в строительстве системы velox, владельцу постройки не придется об этом беспокоиться. А все потому, что система velox – это гарантия идеально ровных поверхностей, готовых к отделке.