Почему мой спрайт не отображается правильно в firefox?

Question

Я построил css спрайт для средней панели навигации моего веб-сайта. В каждом другом браузере он отображается правильно - все в аккуратной строке. Однако в firefox конечная кнопка/ссылка отображается немного ниже, чем остальная часть панели, и я не уверен, почему.

Вот код, я использую:

<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:

#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; 
} 

Я не уверен, что я делаю неправильно, поэтому я не знаю, как это исправить. Любые предложения будут ценны!

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 }​