title: Twitter Bootstrap Dropdowns do not style correctly in Internet Explorer (as per examples in docs)
body: <p>I am having quite a bit of trouble with the drop-down menus provided by twitter bootstrap and their styling (in internet explorer 8 and 9).</p>
  
  <p>When I browse the drop-down example in the official twitter bootstrap documentation <a href="http://getbootstrap.com/2.3.2/javascript.html#dropdowns" rel="nofollow noreferrer">http://getbootstrap.com/2.3.2/javascript.html#dropdowns</a>, the drop-downs from "within a navbar" have a nice white carat as part of the drop-down, a consistent 1px border and are positioned correctly with 1px space between themselves (the border of) and the navbar.</p>
  
  <p>Meanwhile when I am building a navbar as part of my application the white carat has gone, the border is inconsistent and the spacing is incorrect. I suspect on the latter, something is going on with the dropdown "labels" (e.g. "Dropdown", "Dropdown 2" and "Dropdown 3") as the hover effect (the gray background) on them does not fill the whole height of the navbar.</p>
  
  <p>The following screenshot should illustrate the differences between the official documentation in IE 8, and my test case in IE 8 and Chrome:</p>
  
  <p><img src="https://i.imgur.com/x5grl5P.png" alt="test case">(<a href="https://i.imgur.com/x5grl5P.png" rel="nofollow noreferrer">http://i.imgur.com/x5grl5P.png</a>)</p>
  
  <p>The test case was built as a direct copy of the markup from the bootstrap docs, with the standard head/body boilerplate and js/css assets, I have uploaded it as a gist: <a href="https://gist.github.com/galvanist/6121685" rel="nofollow noreferrer">https://gist.github.com/galvanist/6121685</a></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;title&gt;Test&lt;/title&gt;
          &lt;!-- Le HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
          &lt;!--[if lt IE 9]&gt;
              &lt;script src="./js/html5shiv.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;![endif]--&gt;
          &lt;link href="./css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" /&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div class="container"&gt;
          &lt;h1&gt;Bootstrap Dropdown Test&lt;/h1&gt;
              &lt;div id="navbar-example" class="navbar navbar-static"&gt;
                &lt;div class="navbar-inner"&gt;
                  &lt;div class="container" style="width: auto;"&gt;
                    &lt;a class="brand" href="#"&gt;Project Name&lt;/a&gt;
                    &lt;ul class="nav" role="navigation"&gt;
                      &lt;li class="dropdown"&gt;
                        &lt;a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop1"&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://google.com"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#anotherAction"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                        &lt;a href="#" id="drop2" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 2 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop2"&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                    &lt;ul class="nav pull-right"&gt;
                      &lt;li id="fat-menu" class="dropdown"&gt;
                        &lt;a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown"&gt;Dropdown 3 &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                        &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop3"&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
                          &lt;li role="presentation" class="divider"&gt;&lt;/li&gt;
                          &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/li&gt;
                    &lt;/ul&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt; &lt;!-- /navbar-example --&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
  
      &lt;!-- Placed at the end of the document so the pages load faster --&gt;
      &lt;script src="./js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="./js/bootstrap.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The test case is using twitter bootstrap v2.3.2 (the standard zip downloaded from the docs), jQuery v1.10.2 and HTML5 Shiv v3.6.2, I started with older versions of these and without the html shiv (which I do not think is helping), with no luck.</p>