我在使用 twitter bootstrap 提供的下拉菜单及其样式(在 Internet Explorer 8 和 9 中)时遇到了很多麻烦。
当我浏览官方 twitter Bootstrap 文档 http://getbootstrap.com/2.3.2/javascript.html#dropdowns 中的下拉示例时，来自“导航栏内”的下拉菜单有一个漂亮的白色克拉作为下拉菜单的一部分，一个一致的 1 像素边框，并且在它们(的边框)和导航栏之间有 1 像素的空间正确定位。
同时，当我在应用程序中构建导航栏时，白克拉已经消失，边框不一致，间距不正确。我怀疑后者，下拉“标签”(例如“Dropdown”、“Dropdown 2”和“Dropdown 3”)发生了一些事情，因为它们上的悬停效果(灰色背景)没有填满整个高度导航栏。
下面的截图应该说明 IE 8 中的官方文档和我在 IE 8 和 Chrome 中的测试用例之间的区别:
(http://i.imgur.com/x5grl5P.png)
测试用例是作为 bootstrap 文档中标记的直接副本构建的，具有标准的 head/body 样板和 js/css Assets ，我已将其作为要点上传:https://gist.github.com/galvanist/6121685
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="./js/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<h1>Bootstrap Dropdown Test</h1>
<div id="navbar-example" class="navbar navbar-static">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<a class="brand" href="#">Project Name</a>
<ul class="nav" role="navigation">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li id="fat-menu" class="dropdown">
<a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown 3 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div> <!-- /navbar-example -->
</div> <!-- /container -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
测试用例使用 twitter bootstrap v2.3.2(从文档下载的标准 zip)、jQuery v1.10.2 和 HTML5 Shiv v3.6.2，我从这些旧版本开始，没有 html shiv(我不认为是帮助)，没有运气。
最佳答案
尝试插入
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="./js/html5shiv.js" type="text/javascript"></script>
<![endif]-->
在
<link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /> 之后只是在黑暗中拍摄
关于internet-explorer - Twitter Bootstrap 下拉菜单在 Internet Explorer 中的样式不正确(根据文档中的示例)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17971440/