2014-12-11 73 views
0

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

<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; 
} 

回答

0

当我尝试在Chrome和Firefox中给出相同的输出。问题,如果有的话,不应该在你的代码中。尝试使用css reset tool来减少浏览器的不一致性