IE 8 绝对定位元素在其父剪辑问题之外

Posted 2023-03-23

【中文标题】IE 8 绝对定位元素在其父剪辑问题之外

【英文标题】：IE 8 absolute positioned element outside its parent clipping problem

【发布时间】：2011-04-17 13:08:59

【问题描述】：

我在另一个绝对定位的 div 中有一个绝对定位的 div。子 div 内容远大于父级可以包含的内容。这是设计使然。我需要子 div 溢出其父级。它在除 IE 8 之外的所有其他浏览器中都这样做（IE 7 看起来不错，不确定）在 IE8 中，超出父级的子级部分被剪裁。它在那里，但只是不可见，可以通过 IE 开发人员工具进行验证。 我尝试了 z-index，尝试显式设置溢出：可见，完全没有运气。

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

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

有人知道如何解决这个问题吗？

【问题讨论】：

这让我很头疼

更新是救命稻草 - 这个问题快把我逼疯了！

【参考方案1】：

我用这个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)";

【参考方案2】：

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

【讨论】：

绝对子div中的元素是相对的。它们是两个 div，位置：相对，里面有文本。

我更新了问题，找到了原因，但仍然不知道如何解决。

【参考方案3】：

我从此处检查的答案和链接的问题中获得了提示，但不想使用空 DIV（尤其是因为其他浏览器不需要它）。

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

但是，伪元素是styled content，而不是DOM 对象，所以-ms-filter 属性是没有用的。为了妥协，我使用与我想要的原始过滤器匹配的 PNG（实际上是 data: URL，但两者都可以）作为 background-image。

i 强制伪元素到容器的全尺寸，绝对定位它，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%;