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

【问题标题】：IE 7 doesn't display links in full sizeIE 7 不显示完整大小的链接
【发布时间】：2011-03-29 11:37:45
【问题描述】：

这是我的标记：

<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"/> 它看起来像这样：

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

有什么想法吗？

谢谢！

【问题讨论】：

标签： css internet-explorer internet-explorer-7 height

【解决方案1】：

尝试通过添加常见的zoom: 1 修复将hasLayout 赋予.button。

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

【讨论】：

【解决方案2】：

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

【讨论】：