Bootstrap nav-justified 在 IE 8,9 中不起作用。它们是堆叠而不是彼此对齐答案

【问题标题】：Bootstrap nav-justified not working in IE 8,9. They are stacking instead of aligning next to each otherBootstrap nav-justified 在 IE 8,9 中不起作用。它们是堆叠而不是彼此对齐
【发布时间】：2014-03-10 08:08:32
【问题描述】：

我的网站导航菜单对 IE 有一些问题（再次）。在这里，我尝试使用 Twitter 的引导程序为我的网站设置菜单栏。这些项目中的每一个都应该彼此相邻对齐，这适用于 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创建网站的痛苦...... :'(

【问题讨论】：

标签： html css twitter-bootstrap navbar nav

【解决方案1】：

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

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

【讨论】：

这对我不起作用：|... 元素确实浮起来了，但宽度（1% for .nav-justified > li）仍然是个问题。