HTML/CSS : IE adding offset to <li> - looks fine in Chrome, FF

Question

是的，星期四的另一个 IE 专用问题。 :)

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

此布局在 Chrome 中看起来不错，但在 IE9 中，顶部水平菜单和左侧垂直菜单中的 li 都包含一个偏移量。当我选择一个 li 并查看“布局”选项卡时，IE 在 F12 工具中显示了这一点。

(请注意，如果您在 IE 中查看 fiddle ，它会在结果窗口中正确显示!)

关于整理标记/CSS 的任何其他评论表示赞赏。另外我只对 IE9 感兴趣。

Answer 1

将 #topnav li 的显示属性更改为内联将为 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/