IE 在高度 > 4096px 时显示透明度错误？答案

【问题标题】：IE display transparency bug on height > 4096px?IE 在高度 > 4096px 时显示透明度错误？
【发布时间】：2009-09-09 04:23:15
【问题描述】：

当我在大页面上遇到问题时，我正在处理一个带有透明背景覆盖的 JavaScript 对话框。

如果页面很大，则透明叠加层将是纯色（即不再透明）。我做了一些测试，发现这种情况只发生在大于 4096 像素高的叠加层中（嗯，可疑，那是 2^12）。

谁能验证这个问题？你见过变通方法吗？

这是我的测试代码（我正在使用 Prototype）：

<style>
.overlayA { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4095px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}

.overlayB { 
    position:absolute;
    z-index:10;
    width:100%;
    height:4097px;
    top:0px;
    left:0px;
    zoom: 1;
    background-color:#000;
    filter:alpha(opacity=10);
    -moz-opacity:0.1;
    opacity:0.1;
}
</style>
<div style="width:550px;height:5000px;border:1px solid #808080">
    <a href="javascript:// show overlay A" onclick="Element.show('overlayA')">Display A = 4096h</a>
    <br /><a href="javascript:// show overlay B" onclick="Element.show('overlayB')">Display B = 4097h</a>
</div>
<div id="overlayA" onclick="Element.hide(this)" class="overlayA" style="display:none"></div>
<div id="overlayB" onclick="Element.hide(this)" class="overlayB" style="display:none"></div>

【问题讨论】：

您需要确定屏幕何时大于 4096 并使用多个叠加层，一个位于前一个之下。

标签： html css internet-explorer

【解决方案1】：

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

【讨论】：

非常有见地。现在我知道为什么这个问题比 HTML/CSS 更深了。
很棒的解释！谢谢！
哦，当然。我需要知道 DirectX 如何使用 CSS 不透明度过滤器。完全有道理。谢谢 IE！
啊，当然，所有其他浏览器都完全没有泄漏抽象！神奇的 Firefox、Chrome 和 Safari 是如何做到的？
@muneebShabbir - 使其适合小于 4096 像素。

【解决方案2】：

如何将覆盖设置为窗口大小而不是页面大小，并在滚动时向上或向下移动。

【讨论】：

这是可能的，但我担心滞后，尤其是在 pgup/pgdown 上。我确实找到了一个更简单的解决方案 - 使用多个叠加 DIV，每个 DIV 占据屏幕的一小部分，高度小于 4906 像素。

【解决方案3】：

你已经在边缘操作了（那是巨大的......）所以我不知道 MS 会将其归类为错误或“修复”它，即使它是。

您可能需要将其分解为更小的叠加 DIV。

【讨论】：

是的，我最终使用了多个 DIV，并根据页面大小调整/定位它们。

【解决方案4】：

你为什么不张贴固定的叠加层？
这样它就不必像整个页面内容一样大。

简单地做：

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

只需确保它的父级是文档并且文档的宽度和高度为 100%。这样一来，您应该可以使用更小的叠加层。

position:fixed 将确保叠加层相对于视口定位。因此它总是显示在左上角。

【讨论】：

【解决方案5】：

position:fixed 解决方案是一个参差不齐的解决方案。它在 IE 中没有得到很好的支持。

最好的办法是自动创建和附加额外的透明元素（最大高度为 2048 像素，以覆盖同样存在此问题的 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";
    }

【讨论】：