当前位置 : 主页 > 网页制作 > css >

Css过渡div摇晃

来源:互联网 收集:自由互联 发布时间:2021-06-13
为什么当我使用绝对位置和百分比宽度时,当我将鼠标悬停在上面的div上时,我有这个故障? 有例子.我在一个更复杂的网站上有这个小故障. div class="box" text /divdiv class="container"div.box { w
为什么当我使用绝对位置和百分比宽度时,当我将鼠标悬停在上面的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;
}

http://jsfiddle.net/TsUEH/

当您将鼠标悬停在红色文本上时,蓝色div的宽度会发抖.
如何在不删除百分比和位置的情况下避免这种情况?

它适用于我,但如果你发现一个元素“摇动”(特别是在Chrome中),可能是因为translate函数无法正确使用z-index

如果您需要修复它,可以使用此代码(救生员):

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);
网友评论