代码之家 › 专栏 › 技术社区 › Diodeus - James MacFarlane

IE在高度大于4096px时显示透明度错误?

internet-explorer css html

Diodeus - James MacFarlane · 技术社区 · 16 年前

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

如果页面较大,透明覆盖层将是纯色(即不再透明)。我做了一些测试,发现这只发生在覆盖层的高度超过4096像素(嗯,可疑,那是2^12)。

有人能证实这个问题吗?你看到工作了吗?

这是我的测试代码(我使用的是原型):

<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>

5 回复 | 直到 16 年前

codekaizen 16 年前

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

wheresrhys 16 年前

让覆盖图变成窗口的大小而不是页面的大小,然后在滚动时上下移动它。

GEOCHET S.Lott 16 年前

你已经在边缘操作了(这是巨大的…),所以我不知道微软会把它归类为一个bug或者“修复”它,即使它是。

你可能需要把它分成更小的重叠部分。

Pim Jager 16 年前

你为什么不把套印格式贴上去?
这样,它就不必像整个页面内容那样大。

简单地做:

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

只要确保它的父级是文档,并且文档的宽度和高度为100%。这样你就可以很好地使用更小的覆盖层。

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

Dave Horton 16 年前

位置:固溶体是一个斑点状的溶液,在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";
    }