CSS-свойство Internet Explorer «фильтр» игнорирует переполнение: видимый - PullRequest
Новая
       20

CSS-свойство Internet Explorer «фильтр» игнорирует переполнение: видимый

13 голосов
/ 01 сентября 2010

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

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

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

 <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 ]

9 голосов
/ 01 сентября 2010

Обходной путь к этому прост: используйте -ms-фильтр вместо filter : 

-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(opacity=50)';
2 голосов
/ 09 июня 2011

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

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

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

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

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

...