javascript - 当 javascript 更改容器大小时，Box-shadow 不会正确重新呈现。 (IE9/10)

Question

我最近在 IE9 和 IE10 中交叉测试设计时遇到了这个问题。这是 codepen 上的简化版本。 http://codepen.io/jimmykup/full/DHeBC.com (这是实际问题的屏幕截图:http://i.imgur.com/xEQ52.png)

1. 首先 jQuery 将一些 HTML 附加到容器。
2. 当您将鼠标悬停在容器上时，我会使用 .remove() 来删除相同的 HTML。
3. 由于删除了 HTML，父容器(带有框阴影)的高度发生了变化。
4. 在 IE9+ 中，box-shadow 保留在容器中，但它也会在盒子用来拉伸(stretch)的地方留下第二个阴影。

在最新版本的 Firefox、Chrome 和 Opera 中一切正常。 IE9 和 10 是问题所在。

Answer 1

只需在带有阴影的元素上重绘即可。要导致重绘，请更改 z-index。在您的情况下，在删除后将其添加到您的 $('form').hover 中。您可以使用下面的代码将其更改为之前的 z-index 或将其设置为 1。

$('#lightning-deal').css('z-index', $('#lightning-deal').css('z-index'));