爲什麼Chrome瀏覽器不像IE那麼流暢？

例如，當我將第一個div懸停時，它旨在更改bg顏色，並且顏色會發生變化，但在更改顏色時會閃爍，並且在Chrome中根本不光滑。但它在IE和Firefox中真的很流暢......爲什麼呢？（這就是我想知道的） CSS：爲什麼Chrome瀏覽器不像IE那麼流暢？

.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/

來源

2013-06-23 Aryan

我在IE中看到它很流暢。對我來說，它和Firefox和Chrome相同 –

的問題是用下面的代碼

.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-23 05:58:19

是的，你是對的。謝謝，你幫了我很多。 – Aryan

如果沒有渲染和看起來更平滑的其他瀏覽器，嘗試添加一些在你的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-23 05:49:00

爲什麼Chrome瀏覽器不像IE那麼流暢？

回答

相關問題