我的网站导航菜单在 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 创建网站的痛苦......:'(
最佳答案
制作<li> IE 中的元素 float 似乎已修复。您可以将其添加到您的 HTML 中:
<!--[if lt IE 10]>
<style type="text/css" media="all">
.menu_bar > li {
float: left;
}
</style>
<![endif]-->
关于html - Bootstrap nav-justified 在 IE 8,9 中不起作用。它们堆叠而不是彼此对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21720491/