css - 在 IE7 中，具有相对定位子项的父项与子项一起移动

Question

我设置了一个<nav>包含无序列表的链接，并在每个<li>.

因为我使用的字体在每个字符上方都有很大的空间，所以我设置position: relative了链接，并将它们向上推了 6 个像素，因此它们与 parent 的边框紧密<li>。

除了 IE7（可能在下面）之外，这在任何地方都可以正常工作，其中整个<li>及其子<a>项似乎向上推了 6 个像素，这使我的导航偏离了位置。

这是一个 jsfiddle 来显示我的代码：http: //jsfiddle.net/SD3Xj/

如果您想查看实时站点以了解它在 IE7 中的外观，请访问http://jasonbradberry.com

有什么建议可以解决这个问题吗？

Answer 1

这些 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 规则替换为上述规则即可。