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

В IE 6/7 абсолютно (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

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

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

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

Switch 2009-08-12

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

MT (автор) 2009-08-13

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

а 2010-04-12

ААА респект большущий!

RE 2010-07-05

Спасибо, помогло!

пс: отличная форма ответов)

Safec 2010-07-15

большое спасибо. помогло )

MahmudS 2011-02-09

С вылезанием содержимого дива за его пределы помогло. Но у меня почему-то еще один баг вылезает, аккурат в IE 7 (в восьмом и в браузерах нормально). А именно начинают пропадать картинки (они таблицей выводятся) и появляется только при наведении на ссылку под картинкой.

Всеравно, спасибо за совет, помогло ;)

MahmudS 2011-02-09

Ааа, все, разобрался и с пропаданием картинок =) Вот я дурак, надо было всего лишь зафиксировать ширину этого div'a =)

Ян 2011-05-19

Да, я с этим overflow в своё время о х как намучался :(

MaxD 2011-05-24

Спасибо огромное. Благодаря вашей подсказке я могу пойти уже домой