IE 7不显示完整大小的链接

Question

这是我的标记：

<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>

这就是随之而来的CSS（相关部分）：

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; }

我遇到的问题是IE 7会切断按钮的顶部和底部。 在Mozilla Firefox中，它看起来像这样，就像我想要的那样：

Internet Explorer执行此操作：

相对定位不负责任。我试过漂浮，但没有用。手动设置链接或容器的高度或最小高度或字体大小也无济于事。

如果我将一个链接更改为<input type="button" class="button"/> 它看起来像这样：

因此，通过添加另一个元素以某种方式改变高度。不过，我真的想避免这种情况。

有什么想法吗？

谢谢！

Answer 1

尝试通过添加常见的.button解决方案，将hasLayout提供给zoom: 1。

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

Answer 2

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