<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中,当转换更改内容的高度时,框底部的阴影会出现故障。请注意,只有在更改高度的内容框中才会出现这种情况。如果它是容器,阴影效果很好。但是,我无法更改容器的大小,因为我希望它能够动态地适应其内容。
有没有解决方法呢?
答案 0 :(得分:3)
最好的办法是做到以下几点。我的猜测是因为box-shadow不会应用于实际调整大小的元素,因为它无法使用内容调整大小。我需要做更多的研究,但这有效:
为每个孩子涂上透明的盒子阴影。
<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>
<div class="box">
<div class="body">Blah blah blah</div>
<div class="body">Blah blah blah 2</div>
</div>
答案 1 :(得分:1)
IE11中修复了渲染问题。不用担心!