css - 为什么我的 sprite 在 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 }​