Свойство CSS CSS "фильтр" игнорирует переполнение: видимо

По-видимому, Internet Explorer (по крайней мере, до версии 8) игнорирует переполнение: видимо при применении фильтра (например, для непрозрачности), заставляя что-либо вне фильтрованного элемента обрезаться, как если бы использовалось переполнение: скрытые.

Есть ли обходные пути для этого поведения?

Пример кода ниже показывает, как дочерний обрезается контейнером – видны только его правая и нижняя границы.

 <style type="text/css">
  #container {
   position:absolute;
   left:100px;
   top:100px;
   width:100px;
   height:100px;
   border:1px solid black;
   filter:alpha(opacity=50);
   overflow:visible;
  }

  #child {
   position:relative;
   left:-10px;
   top:-10px;
   width:20px;
   height:20px;
   border:1px solid red;
  }
 </style>

 <div id="container">
  <div id="child"></div>
 </div>

Ответ 2

Во-первых, одно интересное замечание: IE9, по-видимому, правильно оценивает переполнение: видимо, даже при эмуляции IE8.

Во-вторых, одним общим обходным решением этой проблемы было бы сделать ваш #container и #child братьями и сестрами друг друга внутри общего родителя. Обычный родитель не будет иметь фильтра (это означает, что переполнение будет работать правильно), и вы примените фильтр, который вам нужен для #container.

Поскольку #child больше не является дочерним элементом контейнера, он не получит ваш фильтр. Это может быть или не быть проблемой, и одним из возможных решений является применение того же фильтра к #child. Я говорю, что это "возможное решение", потому что применение фильтра к двум элементам независимо, тогда их составление может быть или не быть идентичным составлению элементов сначала, а затем применить фильтр к этой композиции. Это зависит от того, что такое фильтр, и от того, перекрываются ли элементы. Даже если это не идентично, это может быть "достаточно близко".

Наконец, если ваша страница имеет тип doctype, который помещает его в режим стандартов (вместо режима quirks, к которому IE по умолчанию используется, когда отсутствует тип doctype), вы можете заметить, что фильтры не применяются к дочерним элементам, если у ребенка нет положения: static (по умолчанию, если не указано положение). Указание любой позиции: абсолютная или позиция: относительная по отношению к ребенку приведет к тому, что фильтр родителя не будет применяться к ребенку. Как правило, это плохо, но побочным эффектом является то, что он вызовет переполнение: видимо, чтобы работать правильно.

Если вы примете это решение, у вас будет такая же проблема, что вам может понадобиться применить фильтр к дочернему элементу.

Ответ 1

Ответ 2