Css IE 7不'；t显示完整大小的链接

这是我的标记：

<div class="contentSubBox">
    <h5>Please choose a report</h5>
    <div class="arrowNavigation">
        <div class="arrowNavigationLeft">
            <a href="#" class="button">&lt;&lt;</a>
            <a href="#" class="button">&lt;</a>
        </div>
        <div class="arrowNavigationCenter">Page 1 of 8</div>
        <div class="arrowNavigationRight">
            <a href="#" class="button">&gt;</a>
            <a href="#" class="button">&gt;&gt;</a>
        </div>
    </div>
</div>

我遇到的问题是IE7切断了按钮的顶部和底部。 在Mozilla Firefox中，它看起来像这样，这正是我想要的：

Internet Explorer执行以下操作：

相对定位不负责任。我试着漂浮，但没有成功。手动设置链接或容器的高度或最小高度或字体大小也没有帮助

如果我将一个链接更改为

它将如下所示：

因此，通过添加另一个元素来改变高度是可行的。不过，我真的想避免这种情况

有什么想法吗

---

谢谢大家!

尝试给div.arrowNavigation一些高度。试试26px

尝试给div.arrowNavigation一些高度。试试26px

通过添加常用的

缩放：1

修复，尝试赋予

按钮

我没有尝试过，但这看起来确实像是一个问题，您可以通过为受影响的元素提供“布局”来修复它。
尝试通过添加常见的
缩放：1
修复按钮来赋予
.button

我还没有尝试过，但这看起来确实像是一个可以通过为受影响的元素提供“布局”来解决的问题

div.arrowNavigation { position: relative; text-align: center; width: 200px;}
div.arrowNavigation div.arrowNavigationLeft, div.arrowNavigation div.arrowNavigationRight { position: absolute; text-align: left; }
div.arrowNavigation div.arrowNavigationLeft { bottom: 0; left: 0; }
div.arrowNavigation div.arrowNavigationRight { bottom: 0; right: 0; }
.button { background: url("http://www.pimco.com/_layouts/PIMCOdotCOM/images/backgrounds/client-access.png") top left repeat-x #EBF2EB; border: 1px solid #B3C3B7; padding: 3px 8px; }