IE9的CSS不对齐菜单正确

我有以下的html：IE9的CSS不对齐菜单正确

<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浏览器中，所有菜单链接在左边都是可怕的。我尝试了很多东西，但无法解决它。任何人都可以请看看我做错了什么？

How it looks in IE

来源

2012-09-07 NoviceMe

你可以做一个小提琴或链接到您的网站，所以我们可以查看在IE浏览器？ – zenkaty

其实它对我的本地主机，我不知道如何使小提琴可以发布它的snagit？ – NoviceMe

我并不熟悉snagit，但是无论您想要什么工具，只要能够在IE中查看即可。 – zenkaty

检查您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-07 04:39:13 bcm

IE9的CSS不对齐菜单正确

回答

相关问题