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

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

16 голосов
/ 27 сентября 2010

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

ОБНОВЛЕНИЕ: Я обнаружил, что проблема вызвана фильтром, определенным в родительском div, как это: 

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

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

Ответы [ 3 ]

4 голосов
/ 27 сентября 2010

Я решил это с помощью этого Как я могу предотвратить использование градиентного фильтра в Internet Explorer для обрезки содержимого, которое должно переполниться?

Мое решение немного изменено, просто поместите пустой 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)";
}
1 голос
/ 27 сентября 2010

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

0 голосов
/ 29 октября 2013

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

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

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

я заставляю псевдоэлемент иметь полный размер контейнера, absolute-position it и 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%;
}
...