有沒有什麼辦法讓不透明度適用於ie8中絕對定位的子元素

在大多數瀏覽器中，當html元素只是部分不透明時，其子元素「繼承」這種不透明性。（這不完全是繼承 - 更準確地說，整個圖像是組裝的，包括父類和它的孩子遞歸地，然後不透明度適用於整個事情。）有沒有什麼辦法讓不透明度適用於ie8中絕對定位的子元素

在IE8中（我也會假設對於早期版本的IE），這並不總是發生在不透明的情況下。如果子元素具有position：static（如果沒有指定位置，則默認爲default），那麼它的確如上所述工作。然而，似乎是這樣的，如果位置被設置爲其他任何東西（例如，絕對的或相對的），那麼子元素是完全不透明的。

我想知道如何使不透明度正確影響父元素和子元素，但仍然保持子元素的位置：絕對;

這是一個問題的例子。下面的代碼應該是在一個垂直的紅色條的頂部製作一個半透明的灰色方框，並帶有半透明的藍色周邊區域。在Firefox，Chrome等中，這是實際看到的。在IE8上，藍色框是正確半透明的，但灰色部分是不透明的。

<!doctype html> 
<html> 
    <head> 
    <style> 
     div.parentElem 
     { 
     background-color:#0000ff; 
     position: absolute; 
     left:75px; 
     top:75px; 
     width:300px; 
     height:225px;   
     opacity:0.5; 
     filter:alpha(opacity=50); 
     } 
     div.childElem 
     { 
     background-color:#808080; 
     position: absolute; 
     left: 10px; 
     right: 10px; 
     top: 10px; 
     bottom: 10px; 
     } 
     div.redBar 
     { 
     position: absolute; 
     left:150px; 
     top:50px; 
     height:350px; 
     width:25px; 
     background-color: #ff0000;   
     } 
    </style> 
    </head> 
    <body> 
    <div class="redBar"></div> 
    <div class="parentElem"> 
     <div class="childElem"></div> 
    </div> 
    </body> 
</html>

顯然，這只是一個玩具的例子 - 我可以有藍色邊框和灰色背景上以達到預期的效果單一的股利。在真實場景中，我將多個不同的div分層，每個div都有一個PNG背景圖像來動態構建圖像。

我第一次嘗試的解決方法是通過將子項上的過濾器設置爲alpha（opacity = 50），將透明度應用於父級和子級;或者簡單地設置filter：inherit ;.這並沒有達到預期的效果，因爲它使半透明的藍色矩形在其上方具有半透明的灰色矩形。中間的空白空間最終呈半透明的藍灰色，而它應該是半透明的灰色。同樣，它不能使元素的兄弟姐妹。任何解決方案都需要在對任何內容應用任何透明度之前合成這兩個圖像。

在我的研究中，我發現了一些建議，應用zoom：1;或浮動：無;到內部元素可能會解決問題，但都不適合我。

我最終的解決方法是給子元素的位置：static。這是一種醜陋的解決方案，但我會做什麼將它應用到上面的例子是改變子元素的風格看起來像：

div.childElem 
    { 
    background-color:#808080; 
    position:static; 
    margin-left:10px; 
    margin-right:10px; 
    height:205px; 
    margin-top:10px; 
    }

這是一種醜陋的解決方案，因爲這意味着我有知道物體的高度。另外，在我編寫幾個不同的png的真實案例中，我希望它們是合乎邏輯的兄弟姐妹，我必須將它們全部放在嵌套的父 - 子 - 孫 - 孫等中。關係。它還阻止我添加除堆棧頂部（最裏面的div）之外的任何文本元素，而不會搞亂定位。它確實有效，但在所有瀏覽器中看起來都一樣。

有什麼辦法可以避免這種可怕的解決方法，並且讓不透明度正確地影響子元素而不使位置靜態？謝謝！

來源

2011-05-26 mikepr

我能找到一種不透明度正確適用於絕對定位的孩子的方法。當我給頁面沒有任何文檔，不透明度被正確應用。實際上，因爲這迫使瀏覽器進入怪癖模式，通常不是一個可行的解決方案。

來源

2011-06-08 21:04:12 mikepr

根據我的研究得出的最佳結論是，您絕對不能在IE8（和Ie <8）中正確地繼承不透明度，並使用絕對定位的元素。 – mikepr 2011-06-28 20:12:50

由於只有IE理解filter規則，你可以使用它的子元素時，你知道他們positionned ... 我沒有找到「正確」的解決方案=/

來源

2011-05-26 21:52:12 MatTheCat

除了高度指定寬度div.childElem。在你的情況：

width:280px;

可能與良好的醇'hasLayout有關。

來源

2011-05-26 21:53:44 squidbe

雖然這是一個偉大的，但我恐怕它沒有做到這一點。我添加了一些JavaScript來向我展示.style.hasLayout作爲內部元素。它似乎沒有關係： – mikepr 2011-05-27 20:23:05

我可以產生所有四種不透明工作/破碎和hasLayout真/假的組合。（位置：指定高度的靜態提供了hasLayout true和opacity工作; position：absolute（有或沒有寬度和高度）產生hasLayout true和opacity broken; position：static並且沒有高度/寬度提供hasLayout false和opacity工作; position：relative並沒有大小提供hasLayout錯誤和不透明度損壞。） – mikepr 2011-05-27 20:29:16

對您的問題進行了輕微更正。這種奇怪的行爲發生在IE8中只有。 IE7和IE9都顯示預期的行爲（其中，子元素首先覆蓋到父元素上，然後整個組合組應用過濾器）。當父元素的位置是：relative（當孩子是絕對的或相對的）時，IE8也被破壞。

來源

2011-08-25 20:59:27 YakkoWarner

簡答：在子元素上設置所需不透明度的alpha濾鏡。

這裏是一個結合實例的詳細說明： http://jacklmoore.com/notes/ie-opacity-inheritance/

來源

2012-01-17 20:39:05 Jack

div.parentElem *{filter:inherit;}

見：

http://seanmonstar.com/post/709013028/ie-opacity-ignores-positioned-children

來源

2012-06-02 17:03:17 gibbitz

我已經取得了一些成功

selector { 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 
    filter: alpha(opacity=50); 
    z-index: -1; 
}

我使用-1，因爲它似乎沒有混亂z-順序與正z-索引一樣多，但是從我發現的結果來看，任何非自動/繼承/ 0 z-索引都可以工作。

來源

2013-12-09 22:09:06

有沒有什麼辦法讓不透明度適用於ie8中絕對定位的子元素

回答

相關問題