CSS 스프라이트는 브라우저에서 정확한 렌더링하지 않습니다

Question

여기 내 스프라이트는 다음과 같습니다 http://crystalise.tw/crystaliseTW/icons/sprite.png

내가 여기에 같은 웹 사이트에 그것을 시도 할 때 : 나는 파이어 폭스와 크롬 브라우저를 사용할 때 http://crystalise.tw

가 제대로 표시되지 않습니다.

무엇이 문제 일 수 있습니까?

이 내 CSS에서입니다 :

.sprite { background: url('../icons/sprite.png') no-repeat top left; width: 64px; height: 64px; } 
.sprite.blogger { background-position: 0px 0px; } 
.sprite.flickr { background-position: 0px -64px; } 
.sprite.github { background-position: 0px -128px; } 
.sprite.heart { background-position: 0px -192px; } 
.sprite.linkedin { background-position: 0px -256px; } 
.sprite.magnolia { background-position: 0px -320px; } 
.sprite.pinterest { background-position: 0px -384px; } 
.sprite.skype { background-position: 0px -448px; } 
.sprite.so { background-position: 0px -512px; } 
.sprite.youtube_64 { background-position: 0px -576px; } 

Answer 1

문제는 당신의 탐색은 700 픽셀 폭이다. 너비가 각각 64px (너비) + 22px (여백) 인 탐색 항목이 10 개 있습니다. 총 너비가 860px, 160px가 너무 큽니다. nav> div 요소의 오른쪽 여백을 줄이거 나 탐색 폭을 늘리는 것이 좋습니다. 마지막으로 nav의 마지막 div에는 오른쪽 여백이 필요하지 않으므로 다음과 같이 입력하십시오. nav> div : last-child { margin-right : 0; }