为什么当我使用绝对位置和百分比宽度时,当我将鼠标悬停在上面的div上时,我有这个小故障? 有例子。我在一个更复杂的网站上遇到了这个小故障。
<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;
}
当您将鼠标悬停在红色文字上时,蓝色div的宽度会发抖。 如何在不删除绝对百分比和位置的情况下避免这种情况?
答案 0 :(得分:19)
它对我来说很好,但如果你找到一个元素&#34;摇动&#34; (特别是在Chrome中),可能是因为translate
函数无法正确使用z-index
如果您需要修复它,可以使用此代码(救生员):
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);