내 스프라이트가 파이어 폭스에서 올바르게 표시되지 않는 이유는 무엇입니까?

Question

내 웹 사이트의 가운데 탐색 모음에 CSS 스프라이트를 만들었습니다. 다른 모든 브라우저에서는 올바르게 표시됩니다. 모두 깔끔한 선으로 표시됩니다. 그러나 파이어 폭스에서는 최종 버튼/링크가 나머지 막대보다 약간 낮게 표시되며 이유는 확실하지 않습니다. 나는 그래서 그것을 해결하는 방법을 모르는 내가 무엇을 잘못하고있어 확실하지 않다

#midnavbar { 
display:block; 
} 

ul#midnav { 
width:955px; 
height:48px; 
list-style:none; 
overflow:hidden; 
} 

ul#midnav li { 
display:inline; 
list-style:none; 
} 

ul#midnav li a { 
height:48px; 
float:left; 
text-indent: 100%; 
white-space: nowrap; 
overflow: hidden; 
} 
ul#midnav li#midnav-1 a { 
width:223px; 
background: transparent url("http://127.0.0.1:4001/wordpress/wp- content/themes/thoriumific/images/midnav.jpg") no-repeat 0 0; /* X and Y position at 0 */ 
} 
ul#midnav li#midnav-1 a:hover { 
background-position:0 -48px; /* Y position -45px for Over instance image */ 
} 
ul#midnav li#midnav-2 a { 
width:178px; 
background: transparent url("http://127.0.0.1:4001/wordpress/wp- content/themes/thoriumific/images/midnav.jpg") no-repeat -223px 0; 
} 
ul#midnav li#midnav-2 a:hover { 
background-position:-223px -48px; 
} 
ul#midnav li#midnav-3 a { 
width:179px; 
background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -401px 0; 
} 
ul#midnav li#midnav-3 a:hover { 
background-position:-401px -48px; 
} 
ul#midnav li#midnav-4 a { 
width:186px; 
background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -580px 0; 
} 
ul#midnav li#midnav-4 a:hover { 
background-position:-580px -48px; 
} 
ul#midnav li#midnav-5 a { 
width:189px; 
background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -766px 0; 
} 
ul#midnav li#midnav-5 a:hover { 
background-position:-766px -48px; 
} 

:

<div id="midnavbar"> 
<ul id="midnav"> 
<li id="midnav-1"><a href="http://127.0.0.1:4001/wordpress/?page_id=13" title="Community Connections">Community Connections</a></li> 
<li id="midnav-2"><a href="http://127.0.0.1:4001/wordpress/?page_id=18 " title="Community Living">Community Living</a></li> 
<li id="midnav-3"><a href="http://127.0.0.1:4001/wordpress/?page_id=118" title="Autism Spectrum">Autism Spectrum</a></li> 
<li id="midnav-4"><a href="http://127.0.0.1:4001/wordpress/?page_id=123" title="Positive Support">Positive Support</a></li> 
<li id="midnav-5"><a href="http://127.0.0.1:4001/wordpress/?page_id=121" title="Medically Fragile">Medically Fragile</a></li> 
</ul> 
</div> 

CSS : 여기

내가 사용하고 코드입니다. 어떤 제안이라도 대단히 감사하겠습니다!

Answer 1

버그가있어서 display: inline;을 사용하지 않는 것이 좋습니다. 알아 낸 것처럼 모든 브라우저에서 실제로 작동하지는 않습니다. 나는 당신이 사용하는 것이 좋습니다 float: left; 또한 귀하의 CSS를 청소.

#midnav { 
    width: 955px; 
    height: 48px; 
    list-style: none; 
    overflow: hidden; 
} 

#midnav li { 
    float: left; 
} 

#midnav a { 
    height: 48px; 
    display: block; 
    text-indent: 100%; 
    white-space: nowrap; 
    overflow: hidden; 
} 


#midnav-1 a { 
    width: 223px; 
    background: transparent url("http://127.0.0.1:4001/wordpress/wp- content/themes/thoriumific/images/midnav.jpg") no-repeat 0 0; /* X and Y position at 0 */ 
} 

#midnav-1 a:hover { background-position:0 -48px } 

#midnav-2 a { 
    width:178px; 
    background: transparent url("http://127.0.0.1:4001/wordpress/wp- content/themes/thoriumific/images/midnav.jpg") no-repeat -223px 0; 
} 

#midnav-2 a:hover { background-position:-223px -48px } 

#midnav-3 a { 
    width:179px; 
    background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -401px 0; 
} 

#midnav-3 a:hover { background-position:-401px -48px } 

#midnav-4 a { 
    width:186px; 
    background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -580px 0; 
} 

#midnav-4 a:hover { background-position:-580px -48px } 

#midnav-5 a { 
    width:189px; 
    background: transparent url("http://127.0.0.1:4001/wordpress/wp-content/themes/thoriumific/images/midnav.jpg") no-repeat -766px 0; 
} 

#midnav-5 a:hover { background-position:-766px -48px }​