Question

我正在尝试在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标准模式下显示页面，忠实再现问题。

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找到子宽度并将父级设置为相同的值，但这仅在子实际具有已定义值时才有效。我还在玩这个，但看起来这是我将得到的最佳答案。 ;）

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

1 个答案: