我的网站导航菜单在 IE7 及更低版本中渲染得很糟糕 - 需要您的建议

Question

我目前正在开发一个网站，该网站有一个简单的 css 导航菜单，其 css 如下所示：

#nav {
    background: #ffffff;
    list-style: none; 
    width:300px;
    height:100px;
    float:right;

    border-color: #600;
    border-width: 1px 1px 1px 1px;
    border-style: solid;

    }

#nav a {
    color: #bf511e;
    text-decoration: none;
    margin: 55px 15px 0px;
    font: bold 18px/100% georgia, verdana, Helvetica, sans-serif;
    font-style: italic;
    float:right;
    }

#nav ul {
    clear:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    text-align:right;
    display:block;
    }

#nav li {
    margin: 0 auto;
    display:block;
    text-align:right;
    }

#nav a:hover {
    color: #ea895c;
    }

HTML 代码如下所示：

<div id="nav">  
                <ul>
                        <li><a href="/blog">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="/">Home</a></li>
                </ul>
            </div>

结果是，

在 Chrome、FF、Opera 和 IE8 上（我认为），它看起来不错（所以让我只添加一个超链接，所以我已将您链接到损坏的图像）

在 IE7 及更低版本上，它看起来像这样： http://tinypic.com/r/2r5u5a1/7

有什么明显的东西吗我这里做错了吗？或者这是一个已知的错误？

我几乎是 CSS 布局的初学者，所以帮助我指明正确的方向将不胜感激。谷歌搜索后没有遇到类似的问题。

Answer 1

从 #nav a 中删除 float: right，并将 float: right 添加到 #nav li

Answer 2

使用 display:inline 而不是 UL 和 Li 中的显示块 css

nav ul {

clear:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
text-align:right; 
display:inline; 
} 

nav li {

margin: 0 auto; 
display:inline; 
text-align:right; 
} 

如果您还有任何疑问，请留下评论，我可以纠正。