Twitter のブートストラップとそのスタイリング (Internet Explorer 8 および 9) によって提供されるドロップダウン メニューにかなりの問題があります。
公式の Twitter ブートストラップ ドキュメントhttp://getbootstrap.com/2.3.2/javascript.html#dropdownsのドロップダウンの例を参照すると、「ナビゲーション バー内」からのドロップダウンには、一部として素敵な白いカラットがあります。ドロップダウン、一貫した 1 ピクセルの境界線であり、それら (の境界線) とナビゲーションバーの間に 1 ピクセルのスペースで正しく配置されます。
一方、アプリケーションの一部として navbar を作成しているときに、白いカラットがなくなってしまい、境界線に一貫性がなくなり、間隔が正しくありません。後者では、ドロップダウンの「ラベル」（「ドロップダウン」、「ドロップダウン2」、「ドロップダウン3」など）で何かが起こっていると思われます。それらのホバー効果（灰色の背景）が高さ全体を埋めていないためですナビゲーションバー。
次のスクリーンショットは、IE 8 の公式ドキュメントと、IE 8 および Chrome での私のテスト ケースとの違いを示しています。
( http://i.imgur.com/x5grl5P.png )
テスト ケースは、標準の head/body ボイラープレートと js/css アセットを使用して、ブートストラップ ドキュメントからのマークアップの直接コピーとして作成されました。Gist としてアップロードしました: 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 ブートストラップ v2.3.2 (ドキュメントからダウンロードした標準の zip)、jQuery v1.10.2、および HTML5 Shiv v3.6.2 を使用しています。助けて）、運が悪い。