引导导航在IE 8,9中不起作用。它们堆叠在一起，而不是相邻对齐

Question

我有一些问题，我的网站的导航菜单与IE (再次)。在这里，我尝试使用Twitter的bootstrap为我的网站设置一个菜单栏。每一项都应该相邻对齐，这在Chrome、Firefox和Safari上都很好用。但是，在Internet Explorer上，每个菜单项都堆叠在一起，并且一个菜单项确实占据了容器的整个宽度。我想知道为什么“nav-justified”在IE上不起作用？

标题部分如下：

<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular.js"> </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.11/angular-route.js"></script>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css" type="text/css"/>
    <!-- Optional theme -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap-theme.min.css" type="text/css"/>
    <!-- Latest compiled and minified JavaScript -->
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="lib/master.css" />    
    <script src="lib/engine.js"></script>
</head>

以下是菜单元素：

<div width="100%" style="color:white;"> 
    <ul class="nav nav-pills nav-justified menu_bar">
        <li><a href="#/knowing_us" item="active" data-toggle="pill" class="menu_text">ABOUT US</a></li>
        <li><a href="#/new_projects" data-toggle="pill" class="menu_text">NEW PROJECT</a></li>
        <li><a href="#/current_projects" data-toggle="pill" class="menu_text">CURRENT PROJECT</a></li>
        <li><a href="#/previous_projects" data-toggle="pill" class="menu_text">PAST PROJECT</a></li>
        <li><a href="#/news_promotions" data-toggle="pill" class="menu_text">NEWS & PROMOTION</a></li>              
        <li><a href="#/contact_us" data-toggle="pill" class="menu_text">CONTACT US</a></li>                                                         
    </ul>
</div>

还有css..。

.menu_bar > li > a:hover,
.menu_bar > li > a:focus {
    background-color: #312f32;
    border: none;
    color: #ddd241;
}
.menu_text {
    font-family:'Cordia new'; 
    font-size:140%;
    color: white; 
    text-decoration: none;
    color: #99979a; 
}

这是我第一次开发一个网站，现在我看到了人们为IE创建网站的痛苦…:'(

Answer 1

在IE中让<li>元素向左浮动似乎可以解决这个问题。您可以将以下内容添加到HTML中：

<!--[if lt IE 10]>
<style type="text/css" media="all">
.menu_bar > li {
  float: left;
}
</style>
<![endif]-->