我设置了一个<nav>，其中包含一个无序的链接列表，并在每个<li>上设置10px边框。
由于我使用的字体在每个字符上方都有大量空间，因此我在链接上设置了position: relative，并将其向上推了6个像素，以使它们紧靠父<li>的边框。
除了IE7（可能还有以下版本）之外，该方法在其他地方均能正常工作，其中整个<li>及其子元素<a>似乎都向上推了6个像素，这使我的导航失去了位置。
这是显示我的代码的jsfiddle：http://jsfiddle.net/SD3Xj/
如果要查看实时站点以查看其在IE7中的外观，则位于http://jasonbradberry.com
有什么建议可以解决这个问题吗？
最佳答案
这些CSS规则将解决您遇到的问题：
nav { margin-top: -80px; padding-bottom: 33px; }
nav ul { float: right; position: relative; }
nav li { float:left; display:inline; border-top: 10px solid #7a7a7a; margin-right: 16px; }
nav li.active { border-top: 20px solid #29cf86;}
nav a {}
只需将CSS规则替换为上述规则即可。