为什么在Internet Explorer中不能正常工作？

Question

我正在尝试使用 <ul> 和 <li> 以及一些 CSS 来创建一个水平导航栏，但是按照我现在的方式，在 IE 中无法正常显示，只有在 Firefox 和 Chrome 中可以正常显示。有人知道原因吗？

以下是 CSS 代码：

.navbar1 ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}
.navbar1 li {
    float: left;
}
.navbar1 a {
    font-size: 24px;
    color: #FC0;
    background-color: #900;
    float: right;
    text-align: center;
    height: 30px;
    width: 120px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-top-style: solid;
    border-bottom-style: solid;
    border-top-color: #FC0;
    border-right-color: #FC0;
    border-bottom-color: #FC0;
    border-left-color: #FC0;
    font-family: "Britannic Bold";  
}
.navbar1 a:hover, a:active {
    background-color:#500
}

这里是HTML代码：

<ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a></a></li>
    <li><a></a></li>
</ul>

- Mike

---

您提供的HTML中没有.navbar1。 - Richard JP Le Guen

@Richard - 我成功地通过将<ul>用class="navbar1"元素包装，并在IE8中使用7兼容模式来使其无法工作。正常的IE8可以工作。 - Kobi

@Kobi - 我也是这么认为，但是如果没有那些信息，问题仍然不完整 ;) - Richard JP Le Guen

Answer 1

由于每个 <li> 元素浮动后仍然占据整行宽度，所以你可以在右侧看到所有链接。

试试这个方法：

.navbar1 li {
    width: 120px;
    float: left;
}

为了安全起见，您可能需要在此处添加另一个overflow: hidden;。

工作示例：http://jsfiddle.net/kobi/kLRLv/

- Kobi

Answer 2

为什么不使用除了float以外的数据类型呢：

ul li {
 display: inline;
}

然后，你可以选择是否指定宽度，并在锚点标签上添加边距和填充来分隔项目，这样它们将被放置在一起，而不是在它们之间换行。

- biggles

Answer 3

我怀疑 .navbar1 a 样式中的 float: right 导致了问题。

此外，您可能希望将菜单 ul 放入一个具有固定宽度的 div 中。类似这样：

<div style="width: 95%; margin: 0 auto;">
    <ul>
       <li><a href="index.html">Home</a></li>
       <li><a href="services.html">Services</a></li>
       <li><a href="contact.html">Contact</a></li>
       <li><a></a></li>
       <li><a></a></li>
    </ul>
</div>

- Jeff Siver

Answer 4

将 .navbar1 a { float: right } 更改为 .navbar1 a {float: none}。

- Rutesh Makhijani