为什么chrome会抵消我的<a> abit too high (vs FireFox)</a>

Question

我迷失了，我怎么能解决这个问题... Chrome是排名前1和FireFox

CSS看起来像

#mainnav ul {
    background: #a51c10;
    padding: 5px 0;
    margin: 0;
    -moz-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
    -webkit-box-shadow: 0 2px 6px rgba(60,60,60,0.8);
    box-shadow: 0 2px 6px rgba(60,60,60,0.8);
    position: relative;
    z-index: 2;
}

#mainnav li {
    display: inline;
    padding: 0;
    margin: 0 2px;
    position: relative;
}

#mainnav a:link, #mainnav a:visited {
    padding: 4px 10px 5px;
    font-size: 16px;
    line-height: 1em;
    font-weight: bold;
    color: #a29061;
    text-decoration: none;
}

更新

它看起来与工作网站有点不同（我不认为我可以发布一个链接）但是复制＆amp;粘贴CSS

http://jsfiddle.net/aM8rn/4/

看来我应该在#mainnav ul

中添加line-height：1em

http://jsfiddle.net/aM8rn/5/

Answer 1

为了避免这类问题，最好重置默认样式：http://meyerweb.com/eric/tools/css/reset/

Answer 2

在#main nav ul上放置行高是让链接与我的外框重叠..

我建议不要使用行高。您的链接上有px填充以尝试使它们与外部ul的行高相匹配，如果您尝试这样做，则可能始终存在1px差异。

相反，我试图让外部容器根据需要展开链接本身，为了做到这一点，他们必须display: block;并且你的内联li元素保持并排在他们内部的块，他们必须成为内联块。

有了这个小提琴，每个px都可以通过a上的填充来控制 - http://jsfiddle.net/g5AXG/1/

我知道你可能不想要一个顶部的“边框”，但我标记了它可以被移除的地方..负面的单词间距是因为内联块，li的，自然会有他们之间的3-4px（就像单词一样）我认为它不会对菜单的美学产生影响，如果它存在或不存在，但无论如何都会把它放进去