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 被移除，父容器（带有 box-shadow）的高度发生了变化。
4. 在 IE9+ 中，box-shadow 保留在容器中，但它也留下了第二个阴影，盒子用来拉伸到的地方。

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

Answer 1

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

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