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

Question

我设置了一个 <nav>其中包含一个无序列表的链接，并在每个 <li> 上设置一个 10px 的边框.

因为我使用的字体在每个字符上方有大量空间，所以我设置了 position: relative在链接上，并将它们向上推 6 个像素，使它们紧贴父级的边界 <li> .

除 IE7(和可能更低版本)外，这在任何地方都可以正常工作，其中整个 <li>和它的 child <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 规则替换为上述规则即可。