HTML / CSS：IE將偏移量添加到 <li> -在FF中看起來不錯

Question

是的，您星期四的另一個僅限IE的問題。 :)

此布局在Chrome中看起來不錯，但頂部水平菜單和左側垂直菜單中的li在IE9中都包含偏移量。 當我選擇li並查看“布局”選項卡時，IE在F12工具中顯示了這一點。

（請注意，如果您查看IE中的小提琴，它將在結果窗口中正確顯示！）

任何其他有關整理標記/ css的意見均表示贊賞。 另外我只對IE9感興趣。

Answer 1

將#topnav li的display屬性更改為inline會為IE修復它，但您必須做一些額外的工作才能使其在其他瀏覽器中正確顯示。

#topnav li 
{
    margin-left: 15px;
    padding: 0 5px;
    font-weight: bold;
    color: #767676;
    height: 100%;
    border-top: 4px solid #DBDBDB;
    line-height: 5em; /* for vertical alignment */
    display: inline; 
}

http://jsfiddle.net/dex3703/nwTUm/

Answer 2

由於它在jsfiddle中運行良好，因此很有可能您沒有使用doctype。 將此添加到頁面的第一行，看看是否可以解決： <!DOCTYPE html> 。 否則，您將處於怪異模式。

Answer 3

我重新啟動了計算機，它在IE9和Chrome中正常運行。

HTML / CSS：IE將偏移量添加到 <li> -在FF中看起來不錯

問題描述

3 個解決方案

解決方案1
0 2012-01-05 18:48:55

解決方案2
0 2012-01-05 18:53:31

解決方案3
0 已采納 2012-01-06 18:12:18

HTML / CSS：IE將偏移量添加到 <li> -在FF中看起來不錯

問題描述

3 個解決方案

解決方案1 0 2012-01-05 18:48:55

解決方案2 0 2012-01-05 18:53:31

解決方案3 0 已采納 2012-01-06 18:12:18

解決方案1
0 2012-01-05 18:48:55

解決方案2
0 2012-01-05 18:53:31

解決方案3
0 已采納 2012-01-06 18:12:18