IE9和10框-调整大小元素上的阴影

Question

http://jsbin.com/ararar/5/edit

tl；博士上面的链接是下面进一步描述的问题的一个快速示例。单击li:s以删除它们，并查看IE9或IE10中的呈现故障。

在我的团队正在开发的一个应用程序中，我们有一个搜索结果的框，它的高度取决于匹配的数量。该元素有一个应用于它的框影。问题是在IE9和IE10中，当盒子变得更小时。似乎IE会“忘记”框影，只会重新呈现元素的内部部分。框影仍将呈现在调整大小的元素的底部，但阴影的副本通常会保留在元素调整大小之前呈现的位置。

如果有任何方法来绕过这一点，任何信息将是最感谢的。

Answer 1

(我意识到这个答案有点晚了，但我认为有必要记录一个可行的解决方案/解决办法。)

我最近也遇到了类似的问题。解决方案似乎是在带有框影的<div>标签下面添加一个附加的box标记。确保这两个<div>之间没有空白，并且高度至少与底部阴影的高度一样高，宽度与阴影一样宽。这似乎迫使IE重新绘制阴影所在的区域，当底部的<div>向上移动时。

在您的例子中，我添加了带框阴影的左、右边距到<div>中，并添加了“影子修复”<div>。您可以在这里看到新版本：http://jsbin.com/ararar/51/edit

希望这对你或其他人有帮助。

Answer 2

我从Andy那里获得了解决方案，但是我没有在标记中添加一个空元素，我只是在父元素上添加了一个空的CSS伪元素(那个带有阴影的元素，而不是调整大小的元素)。

.shadowed-element:after { content: ""; }

在jQuery中完美地与动画高度一起工作，在动画期间重新绘制，而不仅仅是在最后。谢谢安迪让我走上正轨！

Answer 3

我添加了这个css，这样浏览器就可以移除多少高度，它现在对你有用吗？

css

#resizing ul li {
 line-height:1em;
 height:1em;
}