爲什麼我的精靈無法在Firefox中正確顯示？

Question

我爲我的網站的中間導航欄建了一個css sprite。在其他所有瀏覽器中，它都可以正確顯示 - 所有內容都很整齊。然而，在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 }​