0

我有以下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 上，所有菜单链接都在左侧，这很糟糕。我尝试了很多事情，但无法解决。谁能看看我做错了什么？

它在 IE 中的外观

4

1 回答 1

0

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

如果你确实浮动了你的锚点，并且你也有非锚点（比如图像），你会想要浮动那个图像以保持它的一致性？

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

<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*

于 2012-09-07T04:39:13.333 回答