现场演示:
http://codepen.io/flanker/pen/ajAow
有三个要素,如:
<div class="parent"> <div class="child"></div> </div>
在第一个父项中有一个border-radius,而子元素将溢出.在第二个父项中有一个border-radius和overflow:hidden,因此子项被剪裁.他们都工作正常.
但在第三个中,父元素有border-radius和overflow:hidden.这次我向子元素添加了一个动画,然后溢出:隐藏在Chrome中无效(版本28.0.1500.52 beta / Mac OS X 10.8.3).子元素仍然可以在父元素中看到.
但它在Firefox(20.0)中运行良好
谢谢.
解决方法
您所要做的就是添加到父元素跟随css:
-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -webkit-transform: translate3d(0,0); -moz-transform: translate3d(0,0);