css - 为什么 Chrome 无法像 IE 一样流畅地呈现此页面？

Question

例如，当我将鼠标悬停在第一个 div 上时，它的目的是更改 bg 颜色，并且颜色会更改但在更改颜色时会闪烁，并且在 Chrome 中一点也不流畅。但是在 IE 和 Firefox 中真的很流畅……这是为什么呢？ (这就是我想知道的)CSS:

    .bg {
    position:absolute;
    top:0; 
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background-color:#D8D8D8;
    z-index:-10;
}
.DIVOne {
    color:#FFF;
    margin-top:10%;
    background-color:#A2D700;
    height:300%;
    line-height:200%;
    width:20%;
    padding:0 20px;
    font-size:300%;
    font-family:Verdana, Geneva, sans-serif;
    margin-left:20%; 
    border: solid 5px #000;
    border-width:0 4px 5px 0;
    border-radius:5px;
    border-color:transparent #ddd #999 transparent;
    background-clip:padding-box;
    text-align:center;
    z-index:-5;

}
.DIVOne:hover {
    border-width:0 2px 3px 0; 
    margin-right:4px;
    position:relative;
    left:2px;
    top:3px;
}

.DIVOne:hover ~ .bg {
    background-color:#A2D700;
    transition:all 0.5s;
}


.DIVTwo {
    color:#FFF;
    background-color:#FF8000;
    height:300%;
    line-height:200%;
    width:20%;
    margin-top:10px;
    padding:0 20px;
    font-size:300%;
    font-family:Verdana, Geneva, sans-serif;
    margin-left:20%; 
    border: solid 5px #000;
    border-width:0 4px 5px 0;
    border-radius:5px;
    border-color:transparent #ddd #999 transparent;
    background-clip:padding-box;
    text-align:center;
    z-index:-6;

}
.DIVTwo:hover {
    border-width:0 2px 3px 0; 
    margin-right:4px;
    position:relative;
    left:2px;
    top:3px;
}

.DIVTwo:hover ~ .bg {
    background-color:#FF8000;
}

.DIVThree {
    color:#FFF;
    background-color:#0080FF;
    height:300%;
    line-height:200%;
    width:20%;
    margin-top:10px;
    padding:0 20px;
    font-size:300%;
    font-family:Verdana, Geneva, sans-serif;
    margin-left:20%; 
    border: solid 5px #000;
    border-width:0 4px 5px 0;
    border-radius:5px;
    border-color:transparent #ddd #999 transparent;
    background-clip:padding-box;
    text-align:center;
    z-index:-6;

}
.DIVThree:hover {
    border-width:0 2px 3px 0; 
    margin-right:4px;
    position:relative;
    left:2px;
    top:3px;
}

.DIVThree:hover ~ .bg {
    background-color:#0080FF;
}

HTML:

<div class="DIVOne"> Content </div>
<div class="DIVTwo"> Content </div>
<div class="DIVThree"> Content </div>

演示:http://www.jsfiddle.net/aryanf/w7unZ/

Answer 1

问题出在下面的代码上

.DIVOne:hover {
    border-width:0 2px 3px 0; 
    margin-right:4px;
    position:relative;
    left:2px;
    top:3px;
}

是 position:relative; 属性导致了 Chrome 上的问题。尝试删除它。此外，我不明白你为什么首先介绍它。没有它似乎工作正常。

.DIVOne:hover {
    border-width:0 2px 3px 0; 
    margin-right:4px;
    //position:relative;
    left:2px;
    top:3px;
}