IE高度> 4096px顯示透明度錯誤？

當我在大頁面上遇到問題時，我正在處理帶有透明背景疊加層的JavaScript對話框。IE高度> 4096px顯示透明度錯誤？

如果頁面很大，透明覆蓋圖將是純色（即不再透明）。我做了一些測試，發現這隻發生在疊加高於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>

來源

2009-04-21 Diodeus - James MacFarlane

任何工作解決方案對於IE？ – muneebShabbir 2012-05-22 05:53:34

您需要確定屏幕何時大於4096，並使用多個疊加層，其中一個位於前一個之下。 – 2012-05-22 13:21:18

既然你在CSS上有一個不透明度過濾器，我相信你是間接使用DirectShow下的alpha混合和圖像合成的封面。 DirectShow使用DirectX紋理，DX9具有4096x4096像素限制，這將解釋這種不規律的行爲。

來源

2009-04-22 18:10:25 codekaizen

如何使覆蓋的窗口，而不是頁面大小的尺寸，並且移動它向上或向下滾動。

來源

2009-04-21 23:38:02 wheresrhys

這是一種可能性，但我擔心滯後，特別是在pgup/pgdown上。我確實找到了一個更簡單的解決方案 - 使用多個疊加DIV，每個DIV都佔用小於4906px的屏幕的一小部分。 – 2009-04-22 15:05:33

你已經在邊緣操作了（這是巨大的......），所以我不知道MS會將它歸類爲一個錯誤或「修復」它，即使它是。

您可能需要將其分解爲較小的疊加DIV。

來源

2009-04-22 17:53:09

是的，我結束了使用多個DIVs和根據頁面大小調整/定位它們。 – 2009-04-22 20:13:57

爲什麼你不會將覆蓋層固定？
這樣，它不必像整個頁面內容一樣大。

簡單地做：

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

只要確保它的父是文件和文檔的寬度和100％的高度。這樣你就可以做得更好，覆蓋面更小。

注意：固定將確保覆蓋層相對於視口的位置。因此它總是顯示在左上角。

來源

2009-04-22 18:08:58

位置：固定解決方案是一個多發點解決方案..它在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"; 
    }

來源

2009-09-08 20:23:15

IE高度> 4096px顯示透明度錯誤？

回答

相關問題