如何在IE7及更早版本中將子元素放在父元素後面

我試圖在Internet Explorer中創建模糊的投影（與CSS3框陰影類似）。這樣做的最合理的方法似乎是在IE中查找所有需要陰影的元素，並使用jQuery在其中注入新的div。這個新的div將填充與父級完全相同的空間，然後可以使用IE的模糊濾鏡來模糊它。 HTML代碼將是這個樣子：除了事實如何在IE7及更早版本中將子元素放在父元素後面

#parent { 
    position: relative; 
    height: 200px; 
    width: 200px; 
} 
.ie_shadow { 
    background: #111; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    z-index: -1; /* has to be at least one less than its parent */ 
    filter:progid:DXImageTransform.Microsoft.blur(pixelradius=3, MakeShadow='true', ShadowOpacity='0.60'); 
}

這將很好地工作（有一些調整，使不同區域的確定重疊正常工作）：

<div id="parent"> 
    <div class="ie_shadow"></div> 
    All visible content goes here. 
</div>

而CSS無論您如何設置「位置」和「z-index」，IE7和更早版本似乎都不會讓您將子元素放置在其父元素後面。

另一種選擇是在需要陰影的方框之前或之後插入.ie_shadow div，但這有一些問題。具體而言，除非需要陰影的div明確設置，否則沒有好方法來設置陰影的寬度（和位置）。如果用戶調整頁面大小，該方法似乎也會崩潰，因爲.ie_shadow的高度和寬度被明確設置並且不會自動重新計算。

任何幫助，非常感謝。謝謝！

編輯：一個活生生的例子，在這裏看到：http://martinsmucker.com/demo/ie_shadow.html對於我們這些不再與IE7祝福，設置IE8顯示在IE7標準模式的頁面忠實地再現問題。

來源

2010-10-12 Michael Martin-Smucker

最好的答案可能是：「有一些關於IE6和IE7的東西很破，沒有簡單的修復，這似乎是其中之一。」

顯然這不是一個好的答案，所以這裏是我可能會嘗試的。我將使用jQuery的wrap()函數來包裝元素，而不是將陰影作爲元素的絕對定位子元素。

$(document).ready(function(){ 
    $('.has_shadow').wrap('<div class="ie_shadow"></div>'); 
    $('.ie_shadow').each(function(){ 
     var childwidth = $(this).children('.has_shadow').css('width'); 
     $(this).css('width', childwidth) 
    }); 
});

現在唯一的挑戰是使父元素與其子元素具有相同的寬度。浮動它的工作，但它有可能完全破壞頁面的預先存在的設計。可以使用javascript查找孩子的寬度，並將其設置爲相同的值，但只有當孩子實際具有定義的值時，才能真正起作用。我仍在玩這個，但看起來這是我將要得到的最好答案。 ;）

來源

2010-11-05 20:50:47

如何在IE7及更早版本中將子元素放在父元素後面

回答

相關問題