1

ページを開くと、その上にカーソルを合わせると、クロムと Firefox でナビゲーションの動作が異なります。

スタック オーバーフローにより画像を投稿できないため (評判が 10 未満であるため)、下のリンクに画像を追加しました。確認して回答してください。

ここに画像の説明を入力

ナビゲーションの「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;
}
4

1 に答える 1

1

私が見ることができるものから-あなたが望むのは、ホバー時に背景色を変更することです...したがって、ホバークラスで次を削除します:

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

コードを次のように更新すると、すべてのブラウザーで動作することがわかると思います。

フィドル

#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-22T21:16:13.167 に答える