IE 8 绝对定位元素超出其父容器裁剪的问题

Question

我在一个绝对定位的父级 <div> 中放置了一个绝对定位的子级 <div>。子级 <div> 的内容比父级容器要大得多，这是故意设计的。我需要让子级 <div> 溢出其父级容器。在除了 IE 8 之外的所有其他浏览器中都可以实现，但在 IE8 中，超出父级容器部分的子级内容被裁剪了。它确实存在，但是无法显示出来，可以通过 IE 开发者工具进行验证。

我尝试了设置 z-index，尝试显式地设置 overflow:visible，但完全没有用。

更新：我发现问题是由于父级 <div> 中定义的滤镜引起的，如下所示：

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

有没有人有想法绕过这个问题？

- Boris Hamanov

---

这让我省了很多麻烦。 - user240993

更新真是救命稻草 - 这个问题让我发疯！ - rharvey

Answer 1

我使用了这个方法解决了问题：如何防止Internet Explorer的专有渐变滤镜截断应该溢出的内容？

我的解决方案稍作修改，只需在您想要透明的容器中放置一个带有类“ie_rgba_fix”的空div，在IE特定的位置添加此CSS，子元素将不再像overflow：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)";
}

- Boris Hamanov

Answer 2

尝试将绝对定位元素内的元素设置为position:relative，或者在该绝对定位元素中的所有元素周围添加一个包装器并相对定位。

- meder omuraliev

---

绝对定位的子 div 中的元素是相对定位的。它们是两个带有相对定位和文本的 div。 - Boris Hamanov

我更新了问题，找到了原因，但仍然不知道如何修复它。 - Boris Hamanov

Answer 3

我从这里的答案和相关问题中得到了一个提示，但不想使用空的DIV（特别是其他浏览器不需要它）。

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

然而，伪元素是样式化内容，而不是DOM对象，所以-ms-filter属性是无用的。为了妥协，我使用与原始滤镜匹配的PNG（实际上是data: URL，但两者都可以）作为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%;
}

- cautionbug