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

我有一个令人讨厌的显示问题在IE浏览器（7/8）。我有一些用作导航的选项卡，尽管我努力使框变大，但选项卡的顶部和底部部分由于某种原因而被切断。CSS：IE剪辑顶部和底部关闭元素

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

如何它看起来在IE：

enter image description here

如何它看起来在Chrome

enter image description here

现在显然IE不使圆角，这很好（除非有人知道我不知道的东西），但你可以看到IE中链接的高度比C小hrome并实际上剪掉顶部边框。

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，远高于应有的高度以防出现奇怪的高度问题。没有任何东西能解决它。

来源

2011-02-02 Chris

将链接设置为“display：inline-block;”。至于IE6/7，请执行“display：inline; zoom：1;”代替。

我见过这个问题发生在块元素之前。 “inline-block”解决方案似乎解决了这个问题。

来源

2011-02-02 10:58:26

这是正确的答案。（在IE6的'inline-block`周围有一些令人讨厌的bug，但是如果你将它应用到``标签上，它们不会影响你） – Spudley 2011-02-02 11:06:41

尝试添加float：left; 你的填充可能甚至没有工作。

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

来源

2011-02-02 11:06:46 Periback

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

回答

相关问题