0

例如，当我将第一个 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/

4

2 回答 2

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;
}
于 2013-06-23T05:58:19.967 回答
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';
}

希望，它能解决问题。

于 2013-06-23T05:49:00.383 回答