Chrome浏览器中的第一个导航项目跳转

时间:2014-12-11 03:57:28

标签: jquery html css

为什么第一个菜单项(.chosen)会在Chrome浏览器中跳转并刷新?在我看来,它改变Padding-Right和Padding Padding-Bottom。请检查代码帮我解决这个恼人的问题。它在Firefox中很好

    <body>
        <header>
            <div class="con_header">
                <h1> SITE NAME</h1>
                <nav>
                    <ul>
                        <li class="chosen"><a href="">HOME</a></li>
                        <li><a href="">ABOUT</a></li>
                        <li><a href="">SERVICES</a></li>
                        <li><a href="">PORTFOLIO</a></li>
                        <li><a href="">CONTACTS</a></li>
                    </ul>
                </nav>
            </div>
        </header>
    </body>


header {
    background-color: #202628;
    height: 80px;
    color: #e7e7e7;
    font-family: 'Roboto Condensed', sans-serif;
}
.con_header{
    width:1170px;
    margin: 0 auto;
}
.con_header h1{
    float: left;
    width:500px;

}
.con_header nav{
    float: right;
    width:600px;
}
.con_header::after{
    content:'';
    display:block;
    clear: both;
}

.con_header ul{
    margin-top:26px;
    padding: 0;
}
.con_header li{
    display: inline;

}
.con_header li a{
    color: #e7e7e7;
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
    margin: -4px;
}
.con_header li a:hover{
    color: #e7e7e7;
    background-color: rgb(232,76,61); 
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
    margin: -4px;
}
.chosen{
    color: #e7e7e7;
    background-color: rgb(232,76,61); 
    text-align: center;
    text-decoration: none;
    padding: 32.5px 8px;
}

1 个答案:

答案 0 :(得分:0)

当我尝试使用chrome和Firefox时,

提供相同的输出。问题,如果有的话,不应该与您的代码。尝试使用css reset tool来减少浏览器不一致性