Question

这是重现的css，html和js：

HTML：

<div id="outer">
    <div>123</div>
    <div id="inner">345</div>
</div>

的CSS：

#outer {
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.3);
}

#inner {
    height: 200px;
}

JS：

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
    });
});

和http://jsfiddle.net/DwApF/以及

此问题的解决方法是什么？

enter image description here

Answer 1

尝试＃1

http://jsfiddle.net/DwApF/3/

隐藏阴影，然后在幻灯片完成后恢复阴影。这是一个解决方案的黑客，但这是一种可以规避各种行为的方式。

尝试＃2

http://jsfiddle.net/DwApF/11/

这可以同时动画外部和内部容器。它可以滑动阴影而不会产生任何伪影。但是，您需要手动操作外部容器的高度，还要处理隐藏内部容器的内容。它确实消除了工件问题。

尝试＃3 - 我的首选解决方案

http://jsfiddle.net/DwApF/12/

这仍然使用外部/内部容器的同时动画。我在IE9中看不到任何文物。它还使用overflow: hidden处理隐藏内部容器的内容。

外部容器的尺寸仍然必须手动完成，但我认为这是一个合适的解决方案。应该有一种方法可以使用jQuery确定折叠高度，以便不需要对该值进行硬编码。

此解决方案适用于IE9，Chrome和Firefox。请注意，我添加了一些颜色/边框，以便更容易看到不同的容器。

Answer 2

坏消息是IE10中的错误更严重。好消息是，这个简单的规则似乎解决了这个问题 - 至少在IE10中是如此。由于IE9支持：after伪类，它也应该可以工作。

.Element:after {
content: ".";
font-size: 1px;
display: inline;
overflow: hidden;
}

将.Element替换为显示工件的对象的类名或ID（#Element）。

在IE9中，经常分配溢出：隐藏将起作用 - 虽然这在IE10中不起作用。

Answer 3

此解决方案对我有用 - 只需同时为父级的box-shadow属性设置动画：

$(function() {
    $('#outer').click(function() {
        $('#inner').slideUp();
        $(this).animate({'box-shadow': '0px 3px 2px rgba(0, 0, 0, 0.3)'});
    });
});

Answer 4

这似乎对我有用：只需将div包含在另一个 div中，并将这些样式包含在外部div上

padding-bottom: 10px;
padding-right: 0px;
overflow: visible

不知道为什么这对我有用。

Answer 5

对我来说，解决方案是把我想要消除的DIV消失在前面提到的另一个 DIV中......但是......我没有对它应用任何特殊风格。相反，我所做的就是使用jQuery来定位新的父DIV并使其消失。

它为我摆脱了那些烦人的影子文物。（在IE10上）

IE9中动画期间的阴影瑕疵

5 个答案: