css - IE9 css 没有正确对齐菜单

Question

我有以下 html:

<header>
        <nav>
            <ul id="menu">
                <li><img src="../Content/themes/base/images/logo.png" /></li>                        
                <li>@Html.ActionLink("Songs", "Index", "Home")</li>
                <li>@Html.ActionLink("New", "About", "Home")</li>                    
            </ul>
            <div class="fb-like" data-href="abc.com" data-send="false" data-width="450" data-show-faces="false" data-colorscheme="light" data-font="arial"></div>
        </nav>
    </header>  

和CSS:

ul#menu {
    padding: 0 0 2px;
    position: relative;
    margin: 0;
    text-align: left;
    display:inline;
}

ul#menu li {
    display:inline;
    list-style: none;
}

ul#menu li#greeting {
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.8em;
    color: #fff;
}

ul#menu li a {
    padding: 10px 20px;
    font-weight: bold;    
    line-height: 2.8em;
    padding: 8px 15px;
    text-decoration: none;
    font-weight: bold;
    color: black;   
    float: right;
    font-size: 20px;
}

ul#menu li a:hover {
    color: #c00;
    background-color: aliceblue;
}

ul#menu li a:active {
    background-color: #a6e2a6;
    text-decoration: none;
}

ul#menu li.selected a {
    background-color: #fff;
    color: #000;
}

这在 Chrome 中很好用，在 firefox 上也很好用，只有 FB 之类的文本没有显示，这没什么大不了的。但在 IE 上，所有菜单链接都在左侧并彼此重叠，这很糟糕。我尝试了很多事情，但无法解决。谁能看看我做错了什么？

Answer 1

检查您的 nav 元素或 ul 元素的样式是否有错误的定位或宽度限制或您不想要的边距/填充。

如果您确实已将 anchor 漂浮在右侧，并且您也有非 anchor (如图片)，您是否也想漂浮该图片以保持其一致？

另外，您的标记可以非常简化，例如:

<nav>
  <a href="/html/">HTML</a>
  <a href="/html5/">HTML5</a>
  <a href="/css/">CSS</a>
  <a href="/css3/">CSS3</a>
  <a href="/js/">JavaScript</a>
</nav> 

*示例来自 www.w3schools.com/html5/tag_nav.asp*