【问题标题】：box-shadow + transition glitchiness in IE10IE10 中的 box-shadow + 过渡故障
【发布时间】：2012-11-24 02:52:15
【问题描述】：

JSFiddle

<div id="box">
    <div id="body">Blah blah blah</div>
</div>

#box {
    box-shadow: 0 0 8px black;
}
#body {
    height:100px;
    transition: height 0.8s ease;
}
#body:hover {
    height: 200px;
}

在 IE10 中，当过渡改变内容的高度时，框底部的阴影会出现故障。请注意，只有当 content 框改变高度时才会发生这种情况。如果是 container，阴影效果很好。但是，我无法更改容器的大小，因为我希望它是动态的以适应其内容。

有什么解决方法吗？

【问题讨论】：

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

【解决方案1】：

渲染问题已在 IE11 中修复。不用担心！

【讨论】：

【解决方案2】：

最好的办法是执行以下操作。我的猜测是，因为 box-shadow 没有应用于实际调整大小的元素，所以它不能随内容调整大小。我需要做更多的研究，但这有效：

固定容器编辑：

为每个孩子应用一个透明的盒子阴影。

CSS：

<style type='text/css'>
    .box {
        box-shadow: 0 0 8px black;
    }
    .box .body {
        box-shadow: 0 0 8px transparent; 
    }
    .body {
        height:100px;
        transition: height 0.8s ease;

    }
    .body:hover {
        height: 200px;
    }
</style>

HTML：

<div class="box">
    <div class="body">Blah blah blah</div>
    <div class="body">Blah blah blah 2</div>
</div>

【讨论】：

没关系，但如果我有不止一个盒子呢？
您的意思是#box 中有多个div？将 #body 和 #body:hover 更改为 .body 和 .body:hover。然后，您可以放置任意数量的盒子（使用 class="body"）。
是的，但是阴影会出现在每个单独的盒子周围，而不是整个盒子周围。
所以让我确保我理解正确：您在.body 元素上添加了透明阴影？并以某种方式解决了它......我会在我的实际页面上测试它......不幸的是它仍然没有解决问题。我已经edited the Fiddle 让它更像我在实时页面上的内容，并且故障再次出现。
感谢您的帮助。我给了你一个 +1，但问题现在已经消失了。