IE 8绝对定位元素超出其父剪辑问题 [英] IE 8 absolute positioned element outside its parent clipping problem

问题描述

我有一个绝对定位的div在另一个绝对定位的div。子div的内容比父可以包含的要大得多。这是设计。我需要孩子div从其父母泄漏。它在IE 8以外的其他所有浏览器中都这样做（IE 7看起来不错，不确定）在IE8中，超出父级的子部分被剪掉。它在那里，但只是不可见的IE开发工具可以验证。
我尝试了z-index，试图明确地设置overflow：visible，没有运气。
$ b

更新：我发现问题是由过滤器定义在这样的父div：

  -ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃66C6DEA2 ，endColorstr =＃66C6DEA2）; 
  

任何人都有一个想法如何解决？

解决方案

我解决了这个问题

我的解决方案稍微修改一下，只需要在你想要透明的容器里面放一个空的div，内容是ie_rgba_fix，把这个CSS添加到某个特定的IE中，孩子就不会像溢出一样剪辑了：hidden $ /

  / * IE8 RGB解决方法* / 
 div.ie_rgba_fix 
 {
 position：absolute; 
 z-index：-1; 
 top：0; 
剩下：0; 
宽度：100％; 
身高：100％; 
 background-color：transparent; 
 -ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃66C6DEA2，endColorstr =＃66C6DEA2）; 
} 
  

I have an absolute positioned div inside another absolute positioned div. The child div content is much bigger than the parent can contain. This is by design. I need the child div to spill out of its parent. It does so in every other browser except IE 8 (IE 7 looks OK, not sure) In IE8 the part of the child that is out of parent is clipped. It is there, but just not visible as can be verified by IE developer tools. I tried z-index, tried explicitly setting overflow:visible, no luck at all.

UPDATE: I found out that the problem is caused by a filter defined in the parent div like this:

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

Anyone has an idea how to work around that?

解决方案

I solved it using this How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

My solution is a little modified, just put an empty div with class "ie_rgba_fix" inside the container you want transparent, add this CSS someplace IE specific and the children will not clip anymore as with 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)";
}

这篇关于IE 8绝对定位元素超出其父剪辑问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！