IE 8 абсолютный позиционированный элемент вне его проблемы отсечения родительского элемента

У меня есть абсолютный позиционный div внутри другого абсолютного позиционированного div. Содержимое дочернего div намного больше, чем может содержать родительский элемент. Это по дизайну. Мне нужно, чтобы дочерний div выходил из своего родителя. Он делает это в любом другом браузере, кроме IE 8 (IE 7 выглядит нормально, не уверен). В IE8 часть дочернего элемента, находящегося вне родительского элемента, обрезается. Он существует, но просто не отображается, как может быть проверен инструментами разработчика IE. Я попробовал z-index, попытался явно установить переполнение: видимо, не повезло.

UPDATE: я выяснил, что проблема вызвана фильтром, определенным в родительском div следующим образом:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";

У кого-нибудь есть идея, как обойти это?

Ответ 1

Я решил это с помощью Как отключить фильтр градиента интернет-исследователя от отключения содержимого, которое должно переполняться?

Мое решение немного изменено, просто поместите пустой div с классом "ie_rgba_fix" внутри контейнера, который вы хотите прозрачным, добавьте этот CSS-код определенного IE, а дети больше не будут клипа, как при переполнении: hidden

/* IE8 RGB A workaround */
div.ie_rgba_fix
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66C6DEA2,endColorstr=#66C6DEA2)";
}

Ответ 2

Попробуйте сделать элементы внутри элемента с абсолютным расположением position:relative и/или добавить обертку вокруг всех элементов в этом абсолютном позиционированном элементе и относить его.

Ответ 3

я взял отзыв из проверочного ответа здесь и связанный вопрос, но не хотел использовать пустой DIV (особенно потому, что другие браузеры ему не нужны).

Вместо этого я настраиваю CSS, специфичный для IE8, который использует псевдоэлемент контейнера DIV :before.

Однако псевдоэлементы стиль контента, а не объекты DOM, поэтому свойство -ms-filter бесполезно. Чтобы скомпрометировать, я использую PNG, соответствующий исходному фильтру, который мне нужен (на самом деле data: URL, но работает) как background-image.

i принудительно добавляет псевдоэлемент к полному размеру контейнера, его абсолютную позицию и ta-da, дочерний элемент виден вне родителя, а родительский объект все еще получает фон прозрачности.

.container.ie8 {
    background-color: transparent;
    position: relative;
}
.container.ie8:before {
    background-image: url("data:image/png;base64,...");
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}