调整大小元素的IE 9和10 box-shadow

Question

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

TL;博士 以上链接是下面进一步描述的问题的快速示例。单击li：s将其删除，并在IE9或IE10中查看渲染故障。

在我的团队正在构建的应用中，我们有一个搜索结果框，根据匹配数量改变高度。元素应用了一个box-shadow。当盒子变小时，问题出在IE9和IE10中。 IE似乎会“忘记”盒子阴影，只重新渲染元素的内部部分。盒子阴影仍将呈现在已调整大小的元素的底部，但阴影的副本通常会保留在元素调整大小之前渲染的位置。

如果有任何方法可以解决这个问题，那么任何信息都会非常受欢迎。

Answer 1

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

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

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

Answer 2

（我意识到这个答案有点晚了，但我认为值得记录一个有效的解决方案/解决方法。）

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

在您的情况下，我使用框阴影向左侧和右侧边距添加<div>以及添加“阴影修复”<div>。你可以在这里看到新版本：     http://jsbin.com/ararar/51/edit

希望能帮到你或其他人。

Answer 3

我添加了这个css，以便浏览器新删除多少高度，它现在适合你吗？

CSS

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