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

如果它没有渲染并且在其他浏览器上显得流畅，请尝试在CSS文件中添加一些css代码。

假设您在IE中需要圆角边框，则使用

.ddlStyle {
    border-radius: 4px;
    height: 22px;
    width: auto;
    max-width: 300px;
    min-width: 120px;
    padding: 0 0 0px 0px;
    padding-right: 4px;
    font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}

但由于渲染引擎的行为不同，这可能无法在所有其他浏览器上呈现完美。因此，添加一些行并尝试其他浏览器。

.ddlStyle {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    height: 22px;
    width: auto;
    max-width: 300px;
    min-width: 120px;
    padding: 0 0 0px 0px;
    padding-right: 4px;
    font-family: Calibri,Verdana, Tahoma, 'Segoe UI';
}

希望，它解决了这个问题。

Answer 2

问题在于以下代码

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

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

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

为什么Chrome不能像IE一样流畅地呈现此页面？

2 个答案: