internet-explorer - 如何在 IE7 及更早版本中将子元素定位在其父元素之后

Question

我正在尝试在 Internet Explorer 中创建模糊的阴影(类似于 CSS3 框阴影)。最合乎逻辑的方法似乎是在 IE 中找到所有需要阴影的元素，然后使用 jQuery 在其中注入(inject)一个新的 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)
    });
});

现在唯一的挑战是使父元素与其子元素具有相同的宽度。 float 它是可行的，但它有可能完全破坏页面的现有设计。可能可以使用 javascript 找到子项的宽度并将父项设置为相同的值，但这仅在子项实际具有已定义值时才有效。我仍在研究这个问题，但看起来这是我将要得到的最佳答案。 ;)