CSS：IE剪辑顶部和底部关闭元素

Question

我在IE（7/8）中有一个令人讨厌的显示问题。 我有一些选项卡可以用作导航，尽管我努力使方框变大，但由于某些原因，这些选项卡的顶部和底部却被切除。

在Chrome和Firefox中，所有这些都可以正确显示，如下图所示。 请注意，我已将选项卡人为地移动到页面的空白区域，以便更轻松地了解发生了什么。

在IE中的外观：

在Chrome中的外观

现在，显然IE不会渲染圆角，这很好（除非有人知道我不知道的内容），但是您可以看到IE中链接的高度小于Chrome，并且实际上将顶部边框剪掉了。

HTML

HTML就是<div> <a>元素，就像这样

  <div id="topnavcontainer">
              <a href='/web/link1.html' class='current'>Link 1</a>
              <a href='/web/link2.html'>Link 2</a>
              <a href='/web/link3.html'>Link 3</a>
  </div>

CSS

#topnavcontainer {
    display: block;

    color: #fff;
    font-size: 14px;

    position: absolute;
    right: 0;
    bottom: 0;
    height: 40px;
}

#topnavcontainer a {
    color: #555;
    text-decoration: none;
    padding: 5px 12px;
    font-weight: 800;

    overflow: visible;
    background-color: transparent;
    border: 0;
    line-height: normal;
    bottom: 0;
    height: 40px;
}

如您所见，我已经尝试通过指定正常的line-height以及使overflow可见来克服此问题。 我还尝试过使链接和包含div的链接的高度大大超过它们，以防万一出现一个奇怪的高度问题。 似乎没有什么可以解决。

Answer 1

将链接设置为“ display：inline-block;”。 对于IE6 / 7，请执行“显示：内联；缩放：1；” 代替。

我已经在块元素上看到过此问题。 “内联阻止”解决方案似乎可以解决该问题。

Answer 2

尝试添加float：left; 您的填充甚至可能无法正常工作。

如果此解决方案不起作用，请为IE创建不同的CSS，并为IE设置不同的高度。 另外，尝试在您的网站上放置一个按钮，要求您的访客下载Firefox或Chrome ...这将使互联网变得更好！ ：d