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

Question

我在IE（7/8）中有一个恼人的显示问题。我有一些用作导航的标签，尽管我努力使箱子更大，但是由于某些原因，标签的顶部和底部部分被切断了。

在Chrome和Firefox中，这一切都正确显示，如下图所示。注意我已经人为地将标签移动到页面的空白区域，因此更容易看到发生了什么。

在IE中看起来如何：

它在Chrome中的外观

现在显然IE没有呈现圆角，这很好（除非有人知道我不知道的事情）但是你可以看到IE中链接的高度小于Chrome并实际上剪掉了顶部边框。

HTML

HTML只是<a>中的<div>元素，如此

  <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，请执行“display：inline; zoom：1;”代替。

我在块元素之前看到过这个问题。 “内联块”解决方案似乎解决了这个问题。

Answer 2

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

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