Firefox 中的 CSS 水平导航栏对齐问题答案

【问题标题】：CSS Horizontal Navigation Bar Alignment Problem in FirefoxFirefox 中的 CSS 水平导航栏对齐问题
【发布时间】：2010-11-23 22:35:20
【问题描述】：

我的导航栏在 Firefox 和 Opera 中是关闭的。文本下方的填充明显多于上方。我已经多次更改我的代码试图解决这个问题，所以如果我当前的代码中有错误，我深表歉意。在 Safari 和 Chrome 中看起来不错。任何人都可以帮助找到我的错误吗？

CSS：

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
margin-bottom: 50px;
}

li {
display: inline;
margin:0;
padding:0;
}

a.one:link,a.one:visited {
font-size: 18px;
line-height: 18px;
font-weight: bold;
background-color: red;
color: white;
font-family: Helvetica,Arial,san-serif;
text-align: center;
padding: 5px 7px;
text-transform: uppercase;
text-shadow: 0.05em 0.05em 0.1em #333;
letter-spacing: 1px;
}

HTML：

<nav>
    <ul>
    <li><a class=one href=index.html>home</a></li>
    <li><a class=one href=bio.html>bio</a></li>
    <li><a class=one href=news.html>news</a></li>
    <li><a class=one href=disc.html>discography</a></li>
    <li><a class=one href=contact.html>contact</a></li>
    </ul>
</nav>

谢谢！

【问题讨论】：

标签： firefox html css navigationbar

【解决方案1】：

文本下方的内边距明显多于上方。

问题来了：

由于设置了margin:0;和margin-bottom: 50px，所以上下比例为0px/50px

在 Safari 和 Chrome 中看起来不错

比较默认样式表：

并查找供应商扩展：

Mozilla CSS Extensions: -moz-padding-start

【讨论】：