IE 9和10在调整大小元素上的box-shadow [英] IE 9 and 10 box-shadow on resizing element

问题描述

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

tl; dr
上面的链接是下面进一步描述的问题的一个快速示例。点击li：s删除它们，并在IE9或IE10中查看渲染毛刺。

在我的团队正在构建的应用程序中，我们有一个搜索框结果，高度的变化取决于匹配的数量。元素应用了一个框阴影。问题是在IE9和IE10，当盒子变小。看起来IE会忘记关于box-shadow，只重新渲染元素的内部部分。框阴影仍然会在调整大小的元素的底部渲染，但是阴影的副本通常会保留在元素调整大小之前渲染的位置。

解决方案

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

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

在您的情况下，我添加了左右边距到< div> 与框阴影以及添加阴影修复< div> 。您可以在这里查看新版本：
http://jsbin.com/ararar/51/edit

希望能帮助你或别人。

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

tl;dr The above link is a quick example of the problem further described below. Click on the li:s to remove them, and see the rendering glitch in IE9 or IE10.

In an app that my team is building, we have a box for search results, that changes in height depending on the number of matches. The element has a box-shadow applied to it. The problem is in IE9 and IE10, when the box becomes smaller. It seems like IE will "forget" about the box-shadow, and only re-render the inside part of the element. The box-shadow will still be rendered at the bottom of the resized element, but a copy of the shadow will usually be left in place where it was rendered before the element resized.

If there is any way to get around this, any info would be most appreciated.

解决方案

(I realise that this answer is a bit late, but I think it's worth documenting a working solution/workaround.)

I had a similar problem recently. The solutions seems to be add an additional <div> tag below the one with the box shadow. Make sure that there is no margin between these two <div>s and that the height is at least as high as the height of the bottom shadow and the width as wide as the shadow. This seemed to force IE to repaint the area where the shadow used to be when the bottom <div> moves up.

In your case, I added left and right margins to the <div>with the box shadow as well as adding the "shadow-fix" <div>. You can see the new version here: http://jsbin.com/ararar/51/edit

Hope that helps you or someone else.

这篇关于IE 9和10在调整大小元素上的box-shadow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！