{overflow: hidden} и {position: relative} в IE

В IE абсолютно (position: absolute) или относительно (position: relative) позиционированные блоки имеют обыкновение игнорировать правило {overflow: hidden} содержащего их элемента и преспокойно выступать за пределы его границ.

Для решения этой проблемы достаточно задать относительное позиционирование (position: relative) самому контейнеру. Приведённый пример это иллюстрирует.

CSS:

/* дочерний элемент */
#child {background: #ссс; position: relative; top: -25px; }

/* содержащий его контейнер */
#parent {overflow: hidden; position: relative; height: 50px; }

HTML:

<div id="parent"><div id="child">example</div></div>

Комментарии | добавить

Паршуков Алексей 2008-09-18

только вот одним overflow: hidden; дело не ограничиваеться.
У IE вообще Много проблем с позиционирование. Напрмиер position: relative; плохо себя ведёт относительно документа, если менять размер окна или размер родительского элемента через js.

К счастью многие проблемы решаються вышеупомянутым способом.

Максим Покровский 2008-09-22

Очень много багов лечится position:relative;
Проблема только в шестерке или семерка тоже шалит?

Паршуков Алексей 2008-09-26

Я пока не нашёл положительных сдвигов в седьмой версии. Надеемся, что хотябы в IE8 ситуация кардинально поменяться.

Василий 2009-01-18

а что, если и этот хак не помогает?
у парента
background-color:#424242;
background-image:url(../postBG.gif);
background-repeat:repeat-x;
border:1px solid Black;
float:left;
margin:0 5px 5px 0;
position:relative;
width:160px;

у вложенного чаилда

background-image:url(../postHeadBG.gif);
background-repeat:repeat-x;
color:White;
font-size:12px;
line-height:25px;
overflow:hidden;
padding-left:5px;
position:relative;
white-space:nowrap;

MT 2009-01-20

Василий: у вас правило {overflow: hidden} задано для дочернего блока вместо родительского.

Василий 2009-01-21

сорри
я плохо пояснил

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

так вот
из за текста дочерний "разрывает" родительский

MT 2009-01-21

В IE правило {overflow: hidden} имеет смысл только при явном указании одного из измерений (ширины или высоты). У вас ширина и overflow заданы для разных элементов.

Василий 2009-01-21

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

Switch 2009-08-12

а если парент должен быть абсолютным?

MT 2009-08-13

Switch: абсолютное позиционирование родительского элемента в описанном отношении приводит к тому же результату, что и относительное — проблема как таковая просто не возникает.