0

我正在尝试在 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 标准模式显示页面可以忠实地重现该问题。

4

1 回答 1

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

于 2010-11-05T20:50:47.443 回答