Html “我的导航”菜单上的列表项图标在Safari/Firefox中的显示方式不同

我制作了一个导航菜单，每个菜单都有自己的小图标，显示在鼠标悬停处，但它们的垂直对齐方式在Safari和Firefox之间有很大的不同。你知道我该怎么解决这个问题吗

HTML

---

尝试在此处添加

display:inline块

：

#navin a {
    background-color: pink;
    color: #EBFEDB;
    font-family: "Helvetica Neue";
    font-size: 15px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}

---

我的建议是：为

#navbar a

和

#navbar li

元素定义一个固定的

宽度和
高度。请试着看看它是否有效。你不能像那样绕着
li
s。因此，你的出发点必须是摆脱这些。@J.Bruni我尝试了一下，但跨度似乎在浏览器之间移动了位置。@ralph.m你知道更好的方法吗？图标都是不同的形状，所以我需要做一些稍微高一点/低一点的图标，使其看起来平衡。好的，我很乐意在这里提供帮助，但我没有足够的信息。我需要看到像图片这样的东西。不过，基本上，您可以将图像设置为列表项上的背景或
a
s本身，这是最好的方法。
body {
    margin: 0;
}
html { 
    background: url("images/site-bg.jpg") repeat scroll 0 50px transparent;
    position: relative;
}
#navbar {
    border-bottom: 1px solid #56831b;
    background-color: #8898a2;
    clear: both;
    float: left;
    height: 80px;
    margin: 0 auto 6px;
    width: 100%;
    z-index: 99999;
    position: absolute;
    top: 0;
    margin-bottom: 80px;
}
#navbar a {
    text-decoration: none;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    color: #ebfedb;
    text-transform: uppercase;
    padding: 11px 0 8px 0;
}
#navbar ul {
    float: right;
    list-style-type:none;
    line-height: 3.333em;
    text-decoration: none;
    display: block;
    margin-right: 95px;
    margin-top: 35px;   
}
#navbar li {
    display:inline;
    padding: 15px 15px 9px 20px;
    }
.menuico li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico2 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico3 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico4 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico5 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico6 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico7 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
.menuico8 li:hover {
    background: url(images/home.png) no-repeat 0 13px;
}
#container {
    margin: 80px auto -40px;
    position: relative;
    width: 100%;
    overflow: hidden; 
}

#navin a {
    background-color: pink;
    color: #EBFEDB;
    font-family: "Helvetica Neue";
    font-size: 15px;
    margin: 0;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}