IE 8绝对定位元素超出其父剪辑问题

我用这个解决了它 How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

我的解决方案有点修改,只需将一个带有类“ie-rgba-fix”的空DIV放在您想要透明的容器中,将这个CSS添加到某个特定于ie的位置,子级就不会再像溢出那样剪辑了:隐藏

/* 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)";
}

尝试使元素位于绝对定位元素内 position:relative ,和/或在该绝对定位元素中的所有元素及其相对元素周围添加一个包装器。

我从这里选中的答案和链接的问题中得到了提示,但不想使用空的DIV(特别是因为其他浏览器不需要它)。

相反,我设置了IE8特定的CSS,它使用容器DIV :before 伪元。

然而,伪元素是 styled content ,而不是dom对象,因此 -ms-filter 属性无效。为了妥协,我使用一个PNG来匹配我想要的原始过滤器(实际上是 data: URL,但两者都可以)作为 background-image .

我将伪元素强制到容器的整个大小,绝对位置,以及 塔达 子元素在父元素之外可见,父元素仍获得透明背景。

.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%;
}