为什么当我使用绝对位置和百分比宽度时,当我将鼠标悬停在上面的div上时,我有这个故障? 有例子.我在一个更复杂的网站上有这个小故障. div class="box" text /divdiv class="container"div.box { w
有例子.我在一个更复杂的网站上有这个小故障.
<div class="box"> text </div> <div class="container"> <div> .box { width: 50%; height: 50%; background: red; } .box:hover { transition: 0.5s; -webkit-transform: translate(0, 6px); } .container { position:absolute; top:40px; width:40%; height:50px; float:left; background: blue; color:white; }
http://jsfiddle.net/TsUEH/
当您将鼠标悬停在红色文本上时,蓝色div的宽度会发抖.
如何在不删除百分比和位置的情况下避免这种情况?
如果您需要修复它,可以使用此代码(救生员):
-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1.0, 1.0);