在 IE7 及更早版本中，如何将子元素放置在其父元素后面

Question

我正在尝试在 Internet Explorer 中创建模糊的投影（类似于 CSS3 框阴影）。最合乎逻辑的方法似乎是在 IE 中找到所有需要阴影的元素，并使用 jQuery 在其中注入一个新的 div。这个新的 div 将填充与其父级完全相同的空间，然后可以使用 IE 的模糊滤镜对其进行模糊处理。 html 看起来像这样：

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

CSS：

#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');
}

这将完美地工作（稍微调整以确保不同区域的重叠正常工作），除了 IE7 和更早版本似乎不允许您放置子元素无论您如何设置“位置”和“z-index”，都位于其父级后面。

另一种选择是在需要阴影的框之前或之后插入 .ie_shadow div，但这有一些问题。具体来说，没有好的方法来设置阴影的宽度（和位置），除非由需要阴影的 div 显式设置。如果用户调整页面大小，此方法似乎也会失效，因为 .ie_shadow 的高度和宽度是显式设置的并且不会自动重新计算。

非常感谢任何帮助。谢谢！

编辑：有关实例，请参见此处：http://martinsmucker.com/ demo/ie_shadow.html 对于我们这些不再使用 IE7 的人来说，设置 IE8 以 IE7 标准模式显示页面可以忠实地重现该问题。

Answer 1

最好的答案可能是：“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 找到子级的宽度并将父级设置为相同的值，但这只有在子级实际具有定义的值时才真正有效。我仍在考虑这个问题，但看起来这是我能得到的最佳答案。 ;)