css-transitions - IE10 中的 box-shadow + 过渡故障

Question

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 中，当过渡改变内容的高度时，框底部的阴影会出现故障。请注意，仅当内容框改变高度时才会发生这种情况。如果是容器，阴影效果很好。但是，我无法更改容器的大小，因为我希望它是动态的以适应其内容。

有什么解决方法吗？

Answer 1

最好的办法是执行以下操作。我的猜测是，因为 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>

Answer 2

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