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 に答える