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剪輯頂部和底部關閉元素

回答

相關問題