Html IE显示高度上的透明度错误>；4096px？

当我在一个带有透明背景覆盖的JavaScript对话框上工作时，在大型页面上遇到了一个问题

如果页面较大，则透明覆盖层将为纯色（即不再透明）。我做了一些测试，发现这只发生在覆盖层大于4096像素高的地方（嗯，可疑，这是2^12）

有人能证实这个问题吗？你在附近看过一本书吗

以下是我的测试代码（我使用的是原型）：

.overlayA{
位置：绝对位置；
z指数：10；
宽度：100%；
高度：4095px；
顶部：0px；
左：0px；
缩放：1；
背景色：#000；
过滤器：α（不透明度=10）；
-moz不透明度：0.1；
不透明度：0.1；
}
.overlab{
位置：绝对位置；
z指数：10；
宽度：100%；
高度：4097px；
顶部：0px；
左：0px；
缩放：1；
背景色：#000；
过滤器：α（不透明度=10）；
-moz不透明度：0.1；
不透明度：0.1；
}

将覆盖设置为窗口的大小而不是页面的大小，然后滚动上下移动。您已经在边缘操作了（太大了…），所以我不知道MS会将其归类为bug，或者“修复”它，即使它是

---

您可能需要将其拆分为较小的覆盖div。

为什么不将覆盖发布到已修复的位置？
这样它就不必像整个页面内容那么大了

简单地做：

 #Overlay{
  position:fixed;
  left:0px;
  top:0px;
  height:100%;
  width:100%;
  rest of declarations
 }

只需确保它的父级是文档，并且文档的宽度和高度为100%。这样的话，你应该是一个小得多的覆盖良好

---

posotion:fixed将确保覆盖相对于视口定位。因此，它总是显示在左上角。

由于CSS上有一个不透明度过滤器，我相信您是在间接使用DirectShow进行alpha混合和图像合成。DirectShow使用DirectX纹理，DX9的像素限制为4096x4096，这可以解释这种不稳定的行为。

位置：固定解决方案是一种不稳定的解决方案。.IE中不支持它

最好的办法是自动创建并附加额外的透明元素（最大高度为2048px，以覆盖同样存在此问题的XP DX8）

这里是我使用的代码，假设您已经有了一个浮动div解决方案

    if(document.getElementById('document_body').scrollHeight > 2048)
    {
        document.getElementById('float_bg').style.height = "2048px";
        document.getElementById('float_bg').style.zIndex = -1;
        count=1;
        total_height=2048;
        while(total_height < document.getElementById('document_body').scrollHeight)
        {
            clone = document.getElementById('float_bg').cloneNode(true);
            clone.id = 'float_bg_'+count;
            clone.style.zIndex = -1;
            //clone.style.backgroundColor='red';
            clone.style.top = (count*2048)+"px";
            document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg'));
            count++;                

            this_add = 2048;
            if((total_height + 2048) > document.body.scrollHeight)
            {
                clone.style.height = (document.body.scrollHeight - total_height);
            }
            total_height += this_add;
        }
    }
    else
    {
            document.getElementById('float_bg').style.height = document.body.scrollHeight + "px";
    }

if（document.getElementById（'document_body'）。scrollHeight>2048）
{
document.getElementById（'float_bg'）.style.height=“2048px”；
document.getElementById（'float_bg'）.style.zIndex=-1；
计数=1；
总高度=2048；
while（总高度document.body.scrollHeight）
{
clone.style.height=（document.body.scrollHeight-总高度）；
}
总高度+=该加总高度；
}
}
其他的
{
document.getElementById（'float_bg'）。style.height=document.body.scrollHeight+“px”；
}

这是可能的，但我担心滞后，尤其是在pgup/pgdown上。我确实找到了一个更简单的解决方案-使用多个重叠div，每个div占据屏幕的一小部分，其高度低于4906px。是的，我最终使用了多个div，并根据页面大小调整/定位它们。非常有见地。现在我知道为什么这个问题比HTML/CSS更深刻了。非常棒的解释！谢谢哦，当然。我需要知道DirectX如何使用CSS不透明过滤器。完全有道理。谢谢你！啊，当然，所有其他浏览器都完全没有泄漏的抽象！神奇的Firefox、Chrome和Safari是如何做到这一点的？@muneebShabbir-使其适合小于4096px的屏幕。您需要确定屏幕何时大于4096，并使用多个覆盖层，其中一个位于前一个覆盖层的下方。

    if(document.getElementById('document_body').scrollHeight > 2048)
    {
        document.getElementById('float_bg').style.height = "2048px";
        document.getElementById('float_bg').style.zIndex = -1;
        count=1;
        total_height=2048;
        while(total_height < document.getElementById('document_body').scrollHeight)
        {
            clone = document.getElementById('float_bg').cloneNode(true);
            clone.id = 'float_bg_'+count;
            clone.style.zIndex = -1;
            //clone.style.backgroundColor='red';
            clone.style.top = (count*2048)+"px";
            document.getElementById('float_el').insertBefore(clone,document.getElementById('float_bg'));
            count++;                

            this_add = 2048;
            if((total_height + 2048) > document.body.scrollHeight)
            {
                clone.style.height = (document.body.scrollHeight - total_height);
            }
            total_height += this_add;
        }
    }
    else
    {
            document.getElementById('float_bg').style.height = document.body.scrollHeight + "px";
    }