이상한 CSS 동작 - 대각선 경계 - 테두리 가장자리가 왜 직선이 아닌가?

Question

메뉴 요소 사이에 흰색 틈을 추가하고 싶지만 이상한 문제가 발생했습니다. http://jsfiddle.net/ERYat/1/ 다음

가 CSS 코드 : 왼쪽의 경계 대각선 이유

/* a styling */ 
ul#menu-menu-services a { 
    display: block; 
    font-size: 20px; 
    color: #000; 
    text-decoration: none; 
    padding: 5px; 
    border-bottom: 2px solid #fff; 
    border-left-style: solid; 
    border-left-width: 3px; 
    border-left-color: #000; 
} 
/* li fix */ 
ul#menu-menu-services li { 
    margin: 0; 
    padding: 0; 
    border: none; 

} 

/* Sub Menu */ 
ul#menu-menu-services li ul.sub-menu { 
    display: block; 
    margin-left: 0px; 
} 

ul#menu-menu-services li ul.sub-menu li a { 
    padding-left: 15px; 
    font-size: 14px; 
} 

내가 알아낼 수 없습니다이 jfiddle를 참조하십시오. 누구?

Answer 1

테두리 같이 함께 모여 : 당신이 흰색 라인을해야하는 경우, using :after 고려

ul#menu-menu-services a { 
display: block; 
font-family: 'Droid Sans', arial, serif; 
font-size: 20px; 
color: #000; 
text-decoration: none; 
padding: 5px; 
margin-bottom: 2px; 
border-left-style: solid; 
border-left-width: 3px; 
border-left-color: #000; 
} 

:

ul#menu-menu-services a { position: relative; } 
ul#menu-menu-services a:after { 
    content: ''; 
    width: 100%; 
    position: absolute; 
    height: 2px; 
    background: #fff; 
    left: 0; 
    bottom: -2px; 
} 

Answer 2

두 개의 경계 모서리가 그려지기 때문입니다. 아래쪽 테두리를 흰색이 아닌 다른 것으로 변경해 보면 자신이하는 일을보다 분명하게 볼 수 있습니다.

이 효과를 제거하려면 아래쪽 테두리를 제거해야합니다.

하단 테두리가 현재 제공하는 간격이 필요한 경우 padding-bottom 또는 margin-bottom을 대신 사용할 수 있습니다.