1

当我打开我的页面时，当我将鼠标悬停在它上面时，它的导航在 chrome 和 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 回答