如何摆脱悬停上的“隐形边框”

Question

我正在尝试使导航栏只有正确的边框，但是当我这样做时，就像悬停时看不见的左边框，而不是充分使边框成为我想要的颜色。 （左侧的一部分是蓝色，而不是浅蓝色）

这是CSS

#navbar{ 

    width:900px; 
    margin:0 auto; 
    background-color:#3f67c0; 
    height:60px; 


    } 
#navbar ul { 
    list-style-type: none; 
    text-align: left; 
    margin:0px; 
    padding:0px; 
    } 

#navbar ul li { 
    display: inline-block; 

    } 

#navbar ul li a { 
    display:block; 
    border-right:#FFF solid 1px; 
    border-left:none; 
    border-top:none; 
    boder-bottom:none; 
    padding: 20px 40px 20px 40px; 
    text-decoration: none; 
    color: #fff; 
    } 

#navbar ul li a:hover { 

    color: #FFF; 
    background-color: #35b5eb; 

    } 

这是

<div id="navbar"> 
<ul> 
<li><a href="#">HOME</a></li> 
<li><a href="#">CLAIM</a></li> 
<li><a href="#">PROOF</a></li> 
<li><a href="#">HELP</a></li> 
</ul> 
</div> 

Answer 1

这是通过空间在HTML引起的HTML以及display: inline-block及其display: block孩子的组合。最好的解决方法是删除所述空间

<li><a href="#">HOME</a></li 
><li><a href="#">CLAIM</a></li>... 

你也对ul并在<li>或<a>必要font-size在<li>而不是display: inline-block使用font-size: 0，或使用float: left，但这些可能会导致其他文物

http://jsfiddle.net/ExplosionPIlls/zPjCS/