css在mozila和chrome中表現不同

當我打開我的頁面時，它的導航在Chrome和Firefox上的行爲不同，當我將它懸停在它上面時！css在mozila和chrome中表現不同

由於堆棧溢出不允許我發佈圖像（由於聲譽< 10）我已經在下面的鏈接添加圖像，請檢查它並回答！

enter image description here

導航的「CSS」是：

#topnav{ 
    height: 25px; 
    background-color: #33cc66; 
    border: 2px solid #545453; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    text-transform: uppercase; 
    margin-top: 10px; 
    color: white; 
} 
#topnav a{ 
    padding-left: 12px; 
    padding-right: 12px; 
    padding-top: 5px; 
    padding-bottom: 5px; 
    border-right: 2px solid #545453; 
    /*border-bottom: 1px solid #545453;*/ 
    color:#fff; 
    float: left; 
} 
#topnav a:hover { background-color: #99e677;/*#b73b3b; */ 
    padding-bottom: 3px; 
    border-bottom: 2px solid #545453; 
}

來源

2013-10-22 Noor Ali

你可以創建一個小提琴或給我們需要的HTML？ jsfiddle.net – 2013-10-22 20:53:53

請粘貼您的html請 – DaniP

從我所看到的 - 你想要的是改變懸停背景顏色......所以在你的懸停類中刪除：

padding-bottom: 3px; 
border-bottom: 2px solid #545453;

更新你的代碼到下面，我想你會發現它可以在所有瀏覽器中工作。

FIDDLE

#topnav{ 

    background-color: #33cc66; 
    border: 2px solid #545453; 
    border-top-left-radius: 2px; 
    border-top-right-radius: 2px; 
    text-transform: uppercase; 
    margin-top: 10px; 
    color: white; 
    height: 25px; 
    line-height: 25px; 
} 
#topnav a{ 
    padding: 0 12px; 
    border-right: 2px solid #545453; 
    color:#fff; 
    float: left; 
} 
#topnav a:hover { 
    background-color: #99e677;/*#b73b3b; */ 
}

PS：很多時候，當你的代碼將呈現不同的方式在不同的不同的瀏覽器 - 這是一個紅燈爲你停下來想一想：「我真的正確編碼呢？「

來源

2013-10-22 21:16:13 Danield

非常感謝！你能給我提示什麼是我的問題嗎？ –

在懸停上添加填充和邊框導致問題。你只需要改變背景顏色 – Danield

css在mozila和chrome中表現不同

回答

相關問題