如何在 IE7 及更早版本中将子元素定位在其父元素后面答案

【问题标题】：How can I position a child element behind its parent in IE7 and earlier如何在 IE7 及更早版本中将子元素定位在其父元素后面
【发布时间】：2010-10-12 20:34:02
【问题描述】：

我正在尝试在 Internet Explorer 中创建一个模糊的投影（类似于 CSS3 box-shadow）。最合乎逻辑的方法似乎是在 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 标准模式显示页面可以忠实地重现该问题。 p>

【问题讨论】：

标签： internet-explorer internet-explorer-7 z-index shadow css

【解决方案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找到孩子的宽度并将父母设置为相同的值，但这只有在孩子实际具有定义的值时才真正有效。我仍在玩这个，但看起来这是我将得到的最佳答案。 ;)

【讨论】：