如何使我创建的这些菜单项在IE7中看起来正确？

Question

在这个网站上：

www.americaspoeticsoul.com

我做了一个菜单。现在，我只是在IE7中查看它，菜单看起来很糟糕。见...

在Chrome和所有其他Good Browsers中：

在Internet Explorer 7中：

正如你所看到的，IE7中的一切都搞砸了。这是菜单代码：

<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/guidelines/">Guidelines</a></li>
<li><a href="/poems/" class="current_link">Poems &amp; Commentary</a></li>
<li><a href="/contact/">Contact Us</a></li>
</ul>
</div>

菜单CSS：

/*Menu*/

#menu {
margin-bottom:5px;
}

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
float:left;
}

#menu ul li a {
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

#menu ul li a:hover {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

#menu ul li a.current_link {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
width:300px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}

有谁知道为什么IE7会像这样显示菜单？你能帮我解决一下吗？

提前致谢，

森

Answer 1

这是解决问题的CSS（但不支持圆角）。我为#menu设置了一个宽度来阻止联系我们折叠自己，然后我从<a>中移除了不必要的宽度并将它们设置为display：block。这意味着导航项目显示的大小与其他浏览器相同（如果您希望圆角在css之后看到）：

/*Menu*/

#menu {
    margin-bottom:15px;
    width:450px;
}

#menu ul { /* remove bullets and list indents */
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu ul li {
    float:left;
}

#menu ul li a {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#D41C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a:hover {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

#menu ul li a.current_link {
    display:block;
    padding:10px;
    margin:2px;
    background-color:#FF1C1C;
    text-decoration:none;
    font-weight:bold;
    font-size:15px;
    color:white;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

在旁注中，我重新排列了边界半径属性，以便标准是最后一个。原因是现代浏览器使用标准属性而不是旧的前缀。

现在有办法让IE7和IE8产生圆角，有些非常简单。我建议使用http://css3pie.com/。您所做的只是将其文件上传到目录的根目录，并将behavior: url(PIE.htc);属性放入具有CSS3属性（即边界半径）的规则中。如果您阅读该网站，您会看到它支持不少。

Answer 2

最简单的解决方案是改变

#menu ul li {
    float:left;
}

到

#menu ul li {
    display:inline;
}

适用于所有浏览器。它解决了IE7问题，并且在Chrome，Firefox和IE8（我测试过）中仍然可以很好地显示。根据我的经验，display:inline比问题float:left要少得多，这是正确的方法。您需要一组内联列表项，而不是正常页面流之外的一组浮动元素。

圆角在IE7或IE8上不起作用，但如果真的需要在所有浏览器上使其相同，则必须使用替代解决方案，使用图像，JavaScript或其中一个许多其他变通办法或IE特定的恶作剧。

在我看来，不值得额外的代码和麻烦（和UX测试）。菜单功能完美，没有圆角。 Progressive enhancement是每个网络开发人员应该练习的内容，如果有人告诉您网站需要在所有浏览器中看起来都一样，请在此处指出 - http://dowebsitesneedtolookexactlythesameineverybrowser.com/如果他们仍然坚持认为它看起来相同，然后加倍开发成本，以支持他们过时的浏览器和态度！ </rant>

Answer 3

试试以下CSS ..可能会有所帮助。我同意'andyb'说IE不支持圆角......祝你好运！

#menu ul { /* remove bullets and list indents */
list-style: none;
margin: 0;
padding: 0;
}

#menu ul li {
float:left;
}

#menu ul li a {
padding:10px;
margin:2px;
background-color:#D41C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
float:left;

}

#menu ul li a:hover {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
    display:block;
}

#menu ul li a.current_link {
padding:10px;
margin:2px;
background-color:#FF1C1C;
text-decoration:none;
font-weight:bold;
font-size:15px;
color:white;
float:left;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-o-border-radius:10px;
}