IE9中动画期间的阴影瑕疵

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/一样

有关此问题的任何变通方法吗？

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中不起作用.