Question

我在另一个绝对定位的div中有一个绝对定位的div。子div内容远大于父级可以包含的内容。这是设计的。我需要将子div从其父级中溢出。除了IE 8之外的所有其他浏览器都会这样做（IE 7看起来还不错，不确定）在IE8中，剪切了父节点之外的部分。它就在那里，但只是不可见，因为IE开发人员工具可以验证。我尝试了z-index，尝试明确设置溢出：可见，根本没有运气。

更新：我发现问题是由父div中定义的过滤器引起的，如下所示：

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

任何人都知道如何解决这个问题？

Answer 1

我使用此How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

解决了这个问题

我的解决方案有点修改，只需将一个空的div与类“ie_rgba_fix”放在你想透明的容器中，将这个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)";
}

Answer 2

尝试在绝对定位元素position:relative中创建元素，和/或在该绝对定位元素中的所有元素周围添加一个包装器并相对它。

Answer 3

我从这里检查过的答案中得到了一个提示＆amp;链接的问题，但不想使用空的DIV（特别是因为其他浏览器不需要它）。

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

但是，伪元素是styled content，而不是DOM对象，因此-ms-filter属性是无用的。为了妥协，我使用与我想要的原始过滤器匹配的PNG（实际上是一个data:网址，但要么有效）作为background-image。

我将伪元素强制为容器的完整大小，绝对位置和 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%;
}

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

3 个答案: