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

【问题标题】：IE 9 and 10 box-shadow on resizing element调整元素大小时的 IE 9 和 10 box-shadow
【发布时间】：2013-01-20 02:50:13
【问题描述】：

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

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

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

如果有任何方法可以解决这个问题，任何信息都将不胜感激。

【问题讨论】：

好像是延迟响应，移动鼠标就消失了。
对我来说，移动鼠标通常是不够的，但如果我单击，它就会消失。滚动页面不会让它消失，但是将页面的那部分滚动到视口之外然后再次返回。我解释它的方式是，当浏览器重绘屏幕的那一部分时，它就会消失。不知道这是否正确。
这是 IE 中的重绘问题。 social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/… 报告了类似的问题。如果你强制重绘，你会发现问题消失了。当您从同一个父级重复删除元素时，我在该示例中使用的 zoom: 1 技巧在第一次之后将不起作用，因为它不需要再次重排，因为它已经设置为该值。你需要让它每次都重排。

标签： internet-explorer-9 css internet-explorer-10

【解决方案1】：

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

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

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

【讨论】：

这个解决方案在 IE10 中对我有效，但在 IE9 中无效。我相信区别在于:after { content: '' }，添加在边框/阴影之间，而额外的div添加在之后。

【解决方案2】：

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

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

在您的情况下，我在 <div> 中添加了左右边距和框阴影，并添加了“shadow-fix”<div>。您可以在此处查看新版本： http://jsbin.com/ararar/51/edit

希望对您或其他人有所帮助。

【讨论】：

【解决方案3】：

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

css

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

【讨论】：

不，抱歉，还是同样的问题。