CSS <1px Chrome의 스타일 목록 메뉴 간 간격

Question

아래 링크 된 스크린 샷에서 Chrome 39.0.2171.95를 사용할 때 이상한 동작이 발생합니다. 스타일 목록 항목 간에는 1 픽셀 미만의 차이가 나타납니다. Firefox와 IE에서는 괜찮아 보입니다.

망막 디스플레이가있는 장치를 사용하기 전까지는 눈치 채지 못했기 때문에 다른 사람들이 나처럼 똑같은지 알아 보는 것이 좋습니다.

인라인 블록을 사용하지 않으며 WordPress에서 3 계층 메뉴를 생성하므로 각 <li> 사이의 공백을 제거 할 수 없습니다. 음수 여백을 사용하면 차이가 사라지지만 해결 방법이 아닌 해결책으로 인해 다른 문제가 발생합니다 (하위 메뉴가 바뀌게됩니다).

스크린 샷 :http://i58.tinypic.com/m9rkmf.jpg

링크 :http://www.tolkiensociety.org/

이 현재 CSS입니다 :의 패딩과 마진을 가지고 다음과 같이

#mainmenu { 
background:#333333; 
position:absolute; 
bottom:0; 
width:960px; 
} 
#mainmenu.fixed { 
position:fixed; 
top:0; 
z-index:100; 
height:43px; 
} 
#mainmenu > ul { 
padding-left:124px; 
} 
#mainmenu ul { 
height:43px; 
list-style:none; 
position:relative; 
} 
#mainmenu ul li { 
float:left; 
} 
#mainmenu ul li a { 
display:block; 
padding:12px 10px; 
border-bottom:4px solid #00A33E; 
color:#fefefe; 
text-transform:uppercase; 
text-decoration:none; 
font-size:14px; 
font-weight:300; 
height:15px; 
} 
#mainmenu ul li:hover > a { 
background:#222222; 
} 
#mainmenu .menu-item-1128 > a { 
border-bottom: 4px solid #82c4e5; 
} 
#mainmenu .menu-item-644 > a { 
border-bottom: 4px solid #e33417; 
} 
#mainmenu .menu-item-62 > a { 
border-bottom: 4px solid #78bf32; 
} 
#mainmenu .menu-item-91 > a { 
border-bottom: 4px solid #00A33E; 
} 
#mainmenu .menu-item-81 > a { 
border-bottom: 4px solid #d99f3c; 
} 
#mainmenu .menu-item-739 > a { 
border-bottom: 4px solid #F1654F; 
} 
#mainmenu ul ul { 
display:none; 
position:absolute; 
top:39px; 
z-index:9999; 
min-width:200px; 
} 
#mainmenu ul li:hover > ul { 
display:block; 
} 
#mainmenu ul ul li { 
float:none; 
position:relative; 
} 
#mainmenu ul ul li a { 
padding:12px 10px; 
border:0; 
color:#fefefe; 
text-transform:none; 
text-decoration:none; 
font-size:14px; 
font-weight:400; 
height:15px; 
white-space:nowrap; 
background-color:#222; 
} 
#mainmenu ul ul li a:hover { 
background-color:#111; 
} 
#mainmenu ul ul ul { 
position:absolute; 
left:100%; 
top:0; 
} 
#mainmenu ul ul li:hover > a { 
background:#111; 
} 
#mainmenu ul ul ul li a { 
background-color:#111; 
} 
#mainmenu ul ul ul li a:hover { 
background-color:#000; 
} 

Answer 1

Resset UL 인증 및 LI 제로에 나열됩니다.

ol, ul, li { 
    margin: 0; 
    padding: 0; 
} 

참고 : CSS 파일의 맨 위를 추가합니다. 그런 식으로 달리 설정하지 않으면 안쪽 여백과 여백이 0이됩니다.

Answer 2

브라우저가 100 % 확대/축소되어 있습니까? 나는 최근에 비슷한 경우가 있었는데 페이지가 약간 확대되어 약간의 차이가 있음을 알게되었습니다.